Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/77.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
是否有jQueryUI可拖动冲突插件和jQuery3的工作版本?_Jquery_Draggable_Collision - Fatal编程技术网

是否有jQueryUI可拖动冲突插件和jQuery3的工作版本?

是否有jQueryUI可拖动冲突插件和jQuery3的工作版本?,jquery,draggable,collision,Jquery,Draggable,Collision,下面是这个插件: 遗憾的是,这不适用于jQuery3和最新的UI版本。有没有可以使用的修改版本 更新: 我尝试在jQuery3.3.1和UI1.12.1中使用这个插件 这是我的密码: <style> .pin { width: 100px; height: 100px; background-color: #65C02F; margin: 7px; border-radius: 0px; -moz-bo

下面是这个插件:

遗憾的是,这不适用于jQuery3和最新的UI版本。有没有可以使用的修改版本

更新: 我尝试在jQuery3.3.1和UI1.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-ui-draggable-collision.js,行:350-354行:

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

谢谢您的帮助。

因此,我找到了一个解决方案,它可以与最新版本的jQuery及其最新UI一起工作

我写的方法,什么都要一步一步的做。有了这些插件将是有用的,并正常工作。(我没有测试任何函数,只测试了可拖动的函数。)

  • 步骤:从以下位置下载JQuery冲突插件(运行可拖动插件所需):

  • 步骤:从上面的链接下载JQuery UI可拖动冲突插件

  • 步骤:打开JQuery UI Draggable Collision js文件(名为:JQuery UI Draggable Collision.js)
  • 步骤:将所有$(此).data(“可拖动”)字符串替换为$(此).data(“可拖动”)字符串
  • 步骤:在第328行,将不推荐使用的和self函数重命名为addBack函数
  • Ps.Spec.多亏了成员们,他们给出了否定,没有他们,这是不可能的

    $.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 ); }
      });
    
    function handleInit( event, ui, type )
      {
        var w = $(this).data("draggable");
        var o = w.options;
      }