0

divに複数のイベントリスナーdragstartがdragenterありdragoverますdragleave：drop、、、、、、dragend。

それらをdivにアタッチするには、次のbody onload関数を使用します。

function addListeners()
{
    var cols = document.querySelectorAll('#columns .column');
    [].forEach.call(cols, function(col) {
      col.addEventListener('dragstart', handleDragStart, false);
      col.addEventListener('dragenter', handleDragEnter, false);
      col.addEventListener('dragover', handleDragOver, false);
      col.addEventListener('dragleave', handleDragLeave, false);
      col.addEventListener('drop', handleDrop, false);
      col.addEventListener('dragend', handleDragEnd, false);
    });
}

ただし、このコードはdiv全体にeventlistenerを追加します。divのヘッダーだけがこれらのイベントに応答するようにしたい：

ドラッグアンドドロップの例

これで、divの任意の部分をクリックしてドラッグできますが、divの黒い部分（ヘッダー）をクリックして移動できるようにしたいだけです。黒い部分はheaderCSSでは単純です。

HTML

<body onload="addListeners()">

<div id="columns">
  <div class="column" draggable="true"><header>A</header>Textual information inside div A</div>
  <div class="column" draggable="true"><header>B</header>Textual information inside div B</div>
  <div class="column" draggable="true"><header>C</header>Textual information inside div C</div>
</div>

</body>

私の全ページのJSFiddleはここにあります。

これはどのように行うことができますか？

4

1 に答える 1

1

header要素に EventListeners を追加する必要があります。

しかし、それらevent listenersはヘッダーがdraggable=true

そのため、ヘッダーに EventListeners を追加して作成することでdraggable=true、ドラッグを開始できます。

しかし、ここで問題が 1 つあります。ヘッダーだけをドラッグするのではなく、コンテンツ全体、つまり親 div をドラッグします。parentNode.innerHTMLそして、それを他のヘッダー（ドロップしている）と交換したいと考えて います。

したがって、これを行う必要があります：

  • ヘッダー要素にイベントを追加し、
  • 他のすべての操作を実行します。つまり、ヘッダーの親で innerHTML を取得してから交換します。this.parentNode
  • また、innerHTML スワップを実行すると、非常にドラッグ可能な要素が再作成されるため、すべてのイベント リスナーが失われ、イベント バインディング関数addListeners()を再度呼び出す必要があります。

ワーキングフィドル

于 2013-03-12T14:21:00.457 に答える