JQuery UI Draggable Collision 插件有 jQuery 3 的工作版本吗？

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-可拖动-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-可拖动-collision.js，行：350-354行：

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

感谢您的帮助。

Answer 1

因此，我找到了适用于最新版本 jQuery 及其最新版本 UI 的解决方案。

我写了方法，一步一步要做。有了这些插件将很有用并且可以正常工作。（我没有测试任何功能，只测试了可拖动的功能。）

步骤：从这里下载 JQuery 碰撞插件（需要 uired 到运行可拖动插件）：https://sourceforge.net/projects/jquerycollision/
步骤：从上面的link
步骤：打开JQueryUIDraggable Collision js文件（命名为：jquery-ui-draggable-collision.js）
步骤：将所有$(this).data("draggable")字符串替换为$(this).data("uiDraggable") 字符串
步骤：将已弃用的 andSelf 函数重命名为 addBack 函数，第 328 行。

Ps。规格感谢成员们，他们给了底片，没有他们，这是不可能的。

JQuery UI Draggable Collision 插件有 jQuery 3 的工作版本吗？

Is there a working version of JQuery UI Draggable Collision plugin with jQuery 3?

jquery

draggable

collision