Question

我该怎么做：

我有多个draggable的div元素。点击一个元素会将draggable应用于该元素，但如果用户点击工作区外，我希望能够删除draggable：

这是我到目前为止所做的：

$("#workzone").on('click', '.item', function() {
    $(this).draggable();
});

<div id="workzone" style="height:600px">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

上述部分工作正常。

现在，我需要在draggable元素中的任意位置点击#workzone，并且当时只有一个draggable元素处于活动状态。

Answer 1

以下jQuery将关闭draggable（）事件：

$(".item").draggable("disable");

所以这样的事情可能会解决它：

$("#workzone").on('click', '.item', function() {
  $(this).draggable();
  return false;
});

$(document).click(function() {
  $(".item").draggable("disable");
});

在这里小提琴：https://jsfiddle.net/mfz43u5n/1/

编辑（基于评论）：以下jQuery将完成这项工作：

$(".item").click(function() {
   $(this).draggable();
   $(".item").not(this).each(function(){
      $(this).draggable("disable");
   });
});

$(document).click(function(event){
   if( $(event.target).closest(".item").length > 0 ) {
    return false;
 } 
   $(".item").draggable("disable");    
});

在这里小提琴：https://jsfiddle.net/mfz43u5n/3/

jQuery多个可拖动，当时有一个活动

1 个答案: