Существует ли рабочая версия плагина JQuery UI Draggable Collision с jQuery 3? - PullRequest
0 голосов
/ 13 октября 2019

Вот этот плагин: https://sourceforge.net/projects/jquidragcollide/

К сожалению, это не работает с jQuery 3 и последней версией пользовательского интерфейса. Есть ли какая-либо измененная версия, которая работает?

Обновление: я пытаюсь использовать этот плагин с jQuery 3.3.1 и UI 1.12.1.

Вот мой код:

<style>
    .pin {
      width: 100px;
      height: 100px;
      background-color: #65C02F;
      margin: 7px;
      border-radius: 0px;
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      transition: box-shadow 0.2s;
    }

    .pin.placed.boundary {
      box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.4);
      -moz-box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.4);
      -webkit-box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.4);
    }
</style>



    <script src="jquery-3.3.1.min.js"></script>
    <script src="jquery-ui-1.12.1.js"></script>
    <script src="jquery-collision.min.js"></script>
    <script src="jquery-ui-draggable-collision.js"></script>

<script>
// Example
$( function() {
// make pins draggable (using jQuery UI)
$(".pin").draggable({

  // apply collision effect (using collision plugin above)
  obstacle: ".placed",
  preventCollision: true,

  // optional, snap to pixel grid (using jQuery UI)
 // grid: [113,109],

  // animate on start of drag (using jQuery UI)
  start: function(e, ui) {
      $(this).removeClass('placed'),
      $('.placed').addClass('boundary');
  },

  // animate on end of drag (using jQuery UI)
  stop: function(e, ui) {
      $(this).addClass('placed'),
      $('.placed').removeClass('boundary');
  }
});
        });
</script>

<div class="pin"></div>
<div class="pin"></div>
<div class="pin"></div>
<div class="pin"></div>

Я получил следующую ошибку:

jquery-3.3.1.min.js:2 Uncaught TypeError: Cannot read property 'options' of undefined
    at w.fn.init.handleInit (jquery-ui-draggable-collision.js:353)
    at w.fn.init.create (jquery-ui-draggable-collision.js:54)
    at Object.call (jquery-ui-1.12.1.js:1965)
    at $.<computed>.<computed>._trigger (jquery-ui-1.12.1.js:2740)
    at $.<computed>.<computed>._trigger (jquery-ui-1.12.1.js:144)
    at $.<computed>.<computed>._createWidget (jquery-ui-1.12.1.js:347)
    at new $.<computed>.<computed> (jquery-ui-1.12.1.js:99)
    at HTMLDivElement.<anonymous> (jquery-ui-1.12.1.js:281)
    at Function.each (jquery-3.3.1.min.js:2)
    at w.fn.init.each (jquery-3.3.1.min.js:2)

jquery-ui-draggable-collision.js, строка: 53-59 строк:

$.ui.plugin.add( "draggable", "obstacle", {
    create: function(event,ui){       handleInit   .call( this, event, ui ); },
    start: function(event,ui){        handleStart  .call( this, event, ui ); } ,
    drag:  function(event,ui){ return handleCollide.call( this, event, ui ); } ,
    stop:  function(event,ui){        handleCollide.call( this, event, ui );
                                      handleStop   .call( this, event, ui ); }
  });

jquery-ui-draggable-collision.js, строка: 350-354 строки:

function handleInit( event, ui, type )
  {
    var w = $(this).data("draggable");
    var o = w.options;
  }

Спасибо за помощь.

1 Ответ

0 голосов
/ 14 октября 2019

Итак, я нашел решение, которое работает с последней версией jQuery и его последним пользовательским интерфейсом.

Я написал метод, что нужно делать шаг за шагом. С этим плагин будет полезен и работает должным образом. (Я не тестировал ни одну функцию, только перетаскиваемый.)

  1. шаг: загрузите плагин JQuery Collision (требуется для запуска перетаскиваемого плагина), отсюда: https://sourceforge.net/projects/jquerycollision/

  2. шаг: загрузите плагин JQuery UI Draggable Collision по ссылке выше

  3. шаг: откройте js-файл JQuery UI Draggable Collision (с именем: jquery-ui-draggable-collision.js)
  4. шаг: заменить все $ (this) .data ("draggable") на $ (this) .data ("uiDraggable") string
  5. шаг: переименуйте устаревшую функцию andSelf в addBack функцию, в строке 328.

Ps. Спекуляцияблагодаря членам, которые дали негативы, без них это было бы невозможно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...