HTML 5拖動事件

我想在JS和HTML中構建可重新訂購的列表。（試圖做到這一點，而不使用jQuery的UI）我似乎無法弄清楚爲什麼只有dragstart和dragend事件觸發列表項拖動時。任何人都知道爲什麼其他事件不會解僱？HTML 5拖動事件

<ul> 
    <li draggable="true" class="drag">1111111</li> 
    <li draggable="true" class="drag">222222</li> 
    <li draggable="true" class="drag">333333</li> 
    <li draggable="true" class="drag">444444</li> 
</ul> 

<script type="text/javascript"> 
    var drags = document.querySelectorAll('.drag'); 
    [].forEach.call(drags, function(drag) { 
     drag.addEventListener('dragstart', handleDragStart, false); 
     drag.addEventListener('dragenter', handleDragEnter, false); 
     drag.addEventListener('dragover', handleDragOver, false); 
     drag.addEventListener('dragleave', handleDragLeave, false); 
     drag.addEventListener('dragend', handleDragEnd, false); 
    }); 

    function handleDragStart(e){ 
     console.log('handleDragStart'); 
    } 

    function handleDragEnter(e){ 
     console.log('handleDragEnter'); 
    } 

    function handleDragOver(e){ 
     console.log('handleDragOver'); 
    } 

    function handleDragLeave(e){ 
     console.log('handleDragLeave'); 
    } 

    function handleDragEnd(e){ 
     console.log('handleDragEnd'); 
    } 
</script>

來源

2012-07-17 jamie holliday

在這裏找到一個小提琴：http://jsfiddle.net/68QJu/在Chrome瀏覽器上它工作（狗屎很多'handleDragOver' o.O），所以在不同的瀏覽器中測試它？ – yoshi 2012-07-17 19:53:57

我在Snow Leopard的Chrome上進行測試。也許這只是一個問題。我會檢查 – 2012-07-18 12:01:12

是的，我剛剛在OS X上的Chrome 20上進行了測試 - jsut開始和結束事件。 – yoshi 2012-07-18 14:33:05

正如其他人所說，它已經工作在Chrome中。在Firefox中，您需要在dragstart上設置dataTransfer，並且您需要執行e.preventDefault()以使元素有效放置目標。

var drags = document.querySelectorAll('.drag'); 
[].forEach.call(drags, function(drag) { 
    drag.addEventListener('dragstart', handleDragStart, false); 
    drag.addEventListener('dragenter', handleDragEnter, false); 
    drag.addEventListener('dragover', handleDragOver, false); 
    drag.addEventListener('dragleave', handleDragLeave, false); 
    drag.addEventListener('dragend', handleDragEnd, false); 
    drag.addEventListener('drop', handleDragEnd, false); 
}); 

function handleDragStart(e){ 
    console.log('handleDragStart'); 
    e.dataTransfer.setData('text/plain', 'This text may be dragged') 
} 

function handleDragEnter(e){ 
    console.log('handleDragEnter'); 
    e.preventDefault(); 
} 

function handleDragOver(e){ 
    console.log('handleDragOver'); 
    e.preventDefault(); 
} 

function handleDragLeave(e){ 
    console.log('handleDragLeave'); 
} 

function handleDragEnd(e){ 
    console.log('handleDragEnd'); 
    e.preventDefault(); 
}

注：即everything starts working後，我還添加了一個drop處理程序，以便火狐不會試圖當你放下東西加載URL。

來源

2012-07-17 22:09:02 robertc

-1

使用IE 10工作正常。

我建議使用jQuery UI，這是非常，非常簡單，在所有瀏覽器的工作原理：http://jqueryui.com/demos/sortable/

來源

2012-07-17 21:56:28 masipcat

謝謝，我意識到這一點，但有興趣如何在沒有jQuery的情況下工作 - 對不起應該提到 – 2012-07-18 12:03:26

這個演示不適用於Touch（但是這是jQuerys可拖動錯誤）。有一些解決方法可以使它工作，可悲的是，這有點遲緩。 – ProblemsOfSumit 2013-08-02 09:40:38

HTML 5拖動事件

回答

相關問題