是否有带有 jQ​​uery 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. 步骤：将已弃用的 andSelf 函数重命名为 addBack 函数，第 328 行。

附言。规格。感谢成员们，他们给出了否定，没有他们，这是不可能的。