Question

我想检测是否有元素被拖出容器。

例如：

<div id="container">
    <img src="xxx.png" />
</div>

如果我将div中的img元素拖出来。我会删除 img元素，但我不知道如何检测img何时不在div中。

我使用的是jquery拖放库。

Answer 1

有一种简单的方法可以做到这一点。

将儿童设为可拖动
将父级设置为droppable
设置一个标志，如果在拖动停止时为true，则删除元素
在放置功能的父母中取消设置此标志
孩子被拖出父==孩子没有被放入父母

所以当你在父母中移动孩子时没有任何事情发生（removeMe标志未设置）并且它会移回原始位置。

如果您将子项拖到父项之外，则不会取消设置removeMe标志，并且拖动停止方法会删除子项。

的javascript

$("#draggable").draggable({
  start: function(event, ui) {
    // flag to indicate that we want to remove element on drag stop
    ui.helper.removeMe = true;
  },
  stop: function(event, ui) {
    // remove draggable if flag is still true
    // which means it wasn't unset on drop into parent
    // so dragging stopped outside of parent
    if (ui.helper.removeMe) {
      ui.helper.remove();
    }
  },
  // move back if dropped into a droppable
  revert: 'valid'
});

$("#droppable").droppable({
  drop: function(event, ui) {
    // unset removeMe flag as child is still inside parent
    ui.helper.removeMe = false;
  }
});

HTML

<div id="droppable">
  <p id="draggable">Drag me!</p>
</div>

Answer 2

谢谢你提供的解决方案。

我找到了另一个解决方案，不需要外部div来解决这个问题。

我使用“距离”选项来检测鼠标移动了多长时间，然后使用 “停止”选项删除元素。

$(".droppable").droppable({
    drop: function(event, ui) {
        var obj = $(ui.draggable).clone();
        obj.draggable({
                    distance: 100,//used to measure how far my mouse moved.
                    helper: 'clone',
                    opacity : 0.35,
                        stop: function(event, ui) {
                            $(this).remove();//remove this element.
                        }

                      }

       );//obj.draggable
    }//drop
})

Answer 3

您需要在容器外添加div

<div id="droppableDiv">
    <div id="container">
        <img src="xxx.png" />
    </div>
</div>

然后通过添加类似于：

的函数使其可以删除

 $("#droppableDiv").droppable ({  
   drop: function() { alert('dropped'); }  
});

代替警报（'掉线'）;部分你可以添加一些代码从容器div中删除img元素。

here是一个做其他事情但是使用可放置和可拖动对象的例子，也许它可以帮助你理解它是如何工作的！

希望这会有所帮助

-Fortes

jquery拖放问题

3 个答案: