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);
}
ありがとうございます。 – hbaltuntel
ようこそ@hbaltuntel –