お世話になります。
以下のようなhtmlで、#dataList-A ←→ #dataList-Bの間では、ul要素をdraggable,droppableで入れ替えを行い、#dataList-A内では、ul要素の並び替えができるようにしたいと考えております。
以下は#dataList-A ←→ #dataList-Bのul要素入れ替えが動作している状態です。sortableを組み込むと#dataList-Aの枠から外に移動することができないので、お知恵をお借りしたいです。
html
1<html> 2 <body> 3 <ol id="dataList-A" 4 ondrop="dropItem( event, this ); " 5 ondragover="dropAllowItem( event); " 6 ondragleave=""> 7 <ul class="viewitem" id="viewitem_1" draggable="true" ondragstart="dragItem( event );"> 8 <li>1</li> 9 <li>項目A</li> 10 </ul> 11 <ul class="viewitem" id="viewitem_2" draggable="true" ondragstart="dragItem( event );"> 12 <li>2</li> 13 <li>項目B</li> 14 </ul> 15 <ul class="viewitem" id="viewitem_3" draggable="true" ondragstart="dragItem( event );"> 16 <li>3</li> 17 <li>項目C</li> 18 </ul> 19 </ol> 20 <ol id="dataList-B" 21 ondrop="dropItem( event, this ); " 22 ondragover="dropAllowItem( event );" 23 ondragleave=""> 24 </ol> 25 </body> 26</html>
javascript
1function dragItem( $event ) { 2 $event.dataTransfer.setData( "Text", $event.target.id ); 3} 4function dropItem( $event, $this ) { 5 $event.preventDefault(); 6 var $data = $event.dataTransfer.getData( "Text" ); 7 $this.appendChild( document.getElementById( $data ) ); 8} 9function dropAllowItem( $event ) { 10 $event.preventDefault(); 11}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。