是否有带有jQuery 3的JQuery UI Draggable Collision插件的工作版本？

Question

这里是这个插件：https://sourceforge.net/projects/jquidragcollide/

不幸的是，这不适用于jQuery 3和最新的UI版本。是否有任何修改后的版本有效？

更新：我尝试将此插件与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;
  }

感谢您的帮助。

Answer 1

所以，我找到了可以与最新版本的jQuery及其最新UI一起使用的解决方案。

我写了方法，必须逐步进行。有了这些，该插件将非常有用并且可以正常工作。 （我没有测试任何功能，只有可拖动的。）

1. 步骤：从此处下载JQuery Collision插件（需要运行可拖动插件）：https://sourceforge.net/projects/jquerycollision/

2. 步骤：从上面的链接下载JQuery UI Draggable Collision插件

3. 步骤：打开JQuery UI Draggable Collision js文件（名称：jquery-ui-draggable-collision.js）
4. 步骤：将所有$（this）.data（“ draggable”）字符串替换为$（this）.data（“ uiDraggable”）字符串
5. 步骤：在第328行，将已弃用的andSelf函数重命名为addBack函数。

Ps。规格感谢成员，那些给了负面的人，没有他们，这是不可能的。