19

私は順不同のリストを持っています:

  • リスト項目 1
  • リスト項目 2
  • リスト項目 3
  • リスト項目 4
  • リスト項目 5

このコードで実装:

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
</ul>

今、私はそれをドラッグ可能にしたい。例えば、「リスト項目5」を上にドラッグすると、「リスト項目2」と「リスト項目3」の間に配置でき、3番目になります。

私はこれをjQueryなしで、単純なJavascriptで行いたいと思っています。また、ネイティブの HTML5 draggable="true" を使用したいと思います。どんな助けでも大歓迎です。

4

5 に答える 5

19

属性 "draggable" は、要素のドラッグのみを有効にします。必要な変更を行うには、DnD リスナーを実装し、drop イベントを実装する必要があります。

この例では、解決したい同じ問題を見つけることができます: http://www.html5rocks.com/en/tutorials/dnd/basics/

この例では、列 A、B、C のドラッグ アンド ドロップを実装しています。ユーザーは DnD で順序を変更できます。

于 2012-09-08T17:56:22.587 に答える
3

Firefox でテストしている場合は、ドラッグ操作でいくつかのデータを送信する必要があることに注意してください。

function handleDragStart(e) {
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', e.target.innerHTML);
}

myLi.addEventListener('dragstart', handleDragStart, false);

そうしないと、ドラッグされているコンテンツのゴースト イメージが表示されません。

于 2013-05-24T16:32:40.637 に答える
3

li 要素に draggable="true" を追加するだけです。

<ol ondragstart="">
<li draggable="true" data-value="data1">List Item 1</li>
<li draggable="true" data-value="data2">List Item 2</li>
<li draggable="true" data-value="data3">List Item 3</li>
</ol>
于 2012-09-08T16:28:56.667 に答える