2016-09-05 7 views
3

div要素が削除可能です。そしてそれは(リンク)要素とスパン要素を持っています。要素をドラッグして完全に分割しますが、要素にドラッグアンドドロップすると要素の内側に移動します。子要素をドロップ可能としてfalseに設定するには

ここは私のdivです。

<div class="shortcuts" id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    <a href="javascript:;" class="shortcut"><i class="shortcut-icon icon-list-alt"></i><span class="shortcut-label">Apps</span> </a> 
    <a href="javascript:;" class="shortcut"><i class="shortcut-icon icon-bookmark"></i><span class="shortcut-label">Bookmarks</span> </a> 
    <a href="javascript:;" class="shortcut"><i class="shortcut-icon icon-signal"></i> <span class="shortcut-label">Reports</span> </a> 
    <a href="javascript:;" class="shortcut"> <i class="shortcut-icon icon-comment"></i><span class="shortcut-label">Comments</span> </a> 
    <a href="javascript:;" class="shortcut"><i class="shortcut-icon icon-user"></i><span class="shortcut-label">Users</span> </a> 
    <a href="javascript:;" class="shortcut"><i class="shortcut-icon icon-file"></i><span class="shortcut-label">Notes</span> </a> 
    <a href="javascript:;" class="shortcut"><i class="shortcut-icon icon-picture"></i> <span class="shortcut-label">Photos</span> </a> 
    <a href="javascript:;" class="shortcut"> <i class="shortcut-icon icon-tag"></i><span class="shortcut-label">Tags</span> </a> 
</div> 

これは、あなたがその子の上に落とすことができないように子要素のための新しい方法を添付することができjavascriptの

function allowDrop(ev) { 
     ev.preventDefault(); 
    } 

    function drag(ev) { 
     ev.dataTransfer.setData("Text",ev.target.id); 
    } 

    function drop(ev) { 

     ev.preventDefault(); 

     var data = ev.dataTransfer.getData("Text"); 
     document.getElementById(data).className = "shortcut"; 
     var nodeCopy = document.getElementById(data).cloneNode(true);    
     nodeCopy.id = data + "shortCut"; /* We cannot use the same ID */ 
     ev.target.appendChild(nodeCopy); 

    } 

答えて

2

です。そのメソッドの中でstopPropagationを呼び出します。

<div class="shortcuts" id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"> 
     <a href="javascript:;" class="shortcut" ondragover="noAllowDrop(event)><i class="shortcut-icon icon-list-alt"></i><span class="shortcut-label">Apps</span> </a> 

    </div> 




function noAllowDrop(ev) { 
     ev.stopPropagation(); 
    } 
+0

ありがとうございます。 – hbaltuntel

+0

ようこそ@hbaltuntel –

関連する問題