6

JSとHTMLで並べ替え可能なリストを作成しようとしています。（jQuery uiを使用せずに実行しようとしています）リストアイテムがドラッグされたときにdragstartイベントとdragendイベントのみが発生する理由がわかりません。他のイベントが発生しない理由を誰かが知っていますか？

<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>
4

2 に答える 2

6

他の人が述べているように、それはすでにChromeで動作します。Firefoxでは、を設定するdataTransfer必要があり、要素を有効なドロップターゲットにするためdragstartにを実行する必要があります。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('dragstart ' + e.target.innerText);
  e.dataTransfer.setData('text/plain', 'This text may be dragged')
}

function handleDragEnter(e) {
  console.log('dragenter ' + e.target.innerText);
  e.preventDefault();
}

function handleDragOver(e) {
  console.log('dragover ' + e.target.innerText);
  e.preventDefault();
}

function handleDragLeave(e) {
  console.log('dragleave ' + e.target.innerText);
}

function handleDragEnd(e) {
  console.log('dragend ' + e.target.innerText);
  e.preventDefault();
}
<div draggable="true" class="drag">AAAAAA</div>
<div draggable="true" class="drag">BBBBBB</div>
<div draggable="true" class="drag">CCCCCC</div>
<div draggable="true" class="drag">DDDDDD</div>
<div draggable="true" class="drag">EEEEEE</div>

注：drop何かをドロップしたときにFirefoxがURLを読み込もうとしないように、ハンドラーも追加しました。

于 2012-07-17T22:09:02.693 に答える
-1

IE10の使用は正常に機能します。

jQuery UIを使用することをお勧めします。これは非常にシンプルで、すべてのブラウザーで機能します：http: //jqueryui.com/demos/sortable/

于 2012-07-17T21:56:28.020 に答える