HTML 5拖動本地無法捕捉drop事件

我有一個div又包含10周拖動的divHTML 5拖動本地無法捕捉drop事件

<div id="doc"> 
    <div id"1" draggable="true"> lots of stuff here</div> 
    <div id"2" draggable="true"> lots of stuff here</div> 
    ......... 
</div>

在HTML5的瀏覽器啓用我可以拖放這些div更改順序。當我檢查DOM時，我可以看到整個div已經按預期改變了順序，所有內容都完好無損。

到目前爲止，沒有一行javascript。

發生掉落時，我想查看這些物品的新訂單並能對此作出反應。

我曾嘗試使用jQuery的

$('div').on('drop', function(){alert("test")});

無法得到它的工作。我嘗試了很多不同的方式來捕捉這個事件，我無法記住它們。

我不想過分複雜的東西。本地拖放正在做我想要的東西。我可以有一個計時器或mouseup事件監聽器來檢查DOM中項目的順序，但是令我感到沮喪的是，我無法捕獲這個看起來很簡單並且已經在工作的活動。

對我在做什麼有什麼想法嗎？

來源

2013-09-25 David Rinnan

在這篇文章中可能找到解決方案：Posible Solution 您需要創建一個監聽脫事件「dragend」，並在此功能檢查屬性dropEffect來，如果是沒有阻力被取消，否則，指定哪個操作perfomed 。

如果你想要其他的解決方案，我使用Jquery UI來獲取它的方法，並且它的方法可以拖動和放置，這非常容易使用。

來源

2013-09-25 02:09:42 Vishkey

我不知道這是否仍然相關。但@Vishkey給了我想法尋找一些docs。

我有同樣的問題。我可以捕獲"drop"，但所有其他drap events都很好。似乎答案隱藏在下一段中：

當用戶釋放鼠標時，拖放操作結束。如果鼠標是通過一個有效放置目標的元素釋放的，即取消最後一個dragenter或dragover事件的元素，然後放下將會成功，並且放置事件將觸發目標。否則，拖動操作被取消，不會觸發放置事件。

所以經過仔細觀察，我們發現只有當目標是valid drop target時，放置事件纔會觸發。如果我們再看看（更接近這個時間），我們看到

有效的放置目標，就是一個取消了最後的dragenter或dragover事件

所以唯一一個有做只爲了降落效果就是致電event.preventDefault();dragpover或dragenter

來源

2014-07-24 15:33:54 oak

HTML 5拖動本地無法捕捉drop事件

回答

相關問題