Question

我正在尝试使用jquery与draggable进行冲突。但我必须同时使用相同的类（dragMe） - draggable和障碍，因为两个元素都可以拖动。它不起作用，元素甚至没有被拖动。这是链接 -

>     http://jsfiddle.net/TLtpM/1/

请建议如何操作

Answer 1

请找到解决方案的jsfiddle。

   <div class="dragMe">Drag me...</div>

   <div class="obstacle">...but not in here.</div>

http://jsfiddle.net/mayankit/TLtpM/2/

Answer 2

使用jquery-collision.min.js 1.0.2和jquery-ui-draggable-collision.min.js 1.0.2。

只需使用以下内容替换dragMe和障碍物jquery，并为要拖动的元素添加样式类：

$(".dragMe").draggable({
start: function( event, ui ) {
         $(this).removeClass('dragMe'); 
     },
     stop: function( event, ui ) {
         $(this).addClass('dragMe'); 
     },
    obstacle: ".dragMe",
    preventCollision: true,
    containment: "#moveInHere"
});

HTML：

    <div class=" dragMe dragMeCSS">Drag me...</div>

    <div class="dragMe dragMeCSS">...but not in here.</div>

</div>

http://jsfiddle.net/Minority/zqwer0vr/1/

removeClass函数可以保持您拖动的元素不会将自身视为障碍。因为在拖动元素时要删除此类，所以必须为每个元素创建一个单独的样式类，以便保留样式。

Answer 3

如果选择所有不拖动的项目，则无法尝试

obstacle: '.dragMe:not(.ui-draggable-dragging)',

Jquery碰撞：可拖动和障碍是同一个元素

3 个答案: