html5拖放防止拖放，除非div為空

Question

我試圖為簡單的圖形創建創建一種視覺界面。 它由10個圖像圖標和5個可以放置這些圖標的框組成。 我希望用戶能夠選擇要顯示的10個圖標中的哪一個，並通過拖放來按其認為合適的方式排列元素。 這5個圖標也位於div中，可將其放置在該div中，這樣，如果他們改變主意並希望選擇其他圖標，則可以將其返回到“主頁”行。

與這個簡單的教程沒有什么不同，但是有更多的div和圖標： http : //www.w3schools.com/html/tryit.asp? filename=tryhtml5_draganddrop2

我的腳本：

<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
//CSS CHANGES HERE FOR ON PICKUP
$( ".dragfive" ).css("border", "2px solid #ff9d00");
$( ".select5" ).css("border", "2px solid #ff9d00");
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
//CSS CHANGES HERE FOR ON DROP
$( ".dragfive" ).css("border", "2px solid transparent");
$( ".select5" ).css("border", "2px solid transparent");
}
</script>

我的代碼與本教程完全相同，但是我在注釋中添加了一些不錯的CSS更改-我制作了彩色邊框，向用戶指示他們可以放置該項目的位置。 這些一旦丟棄就變得透明。 除...以外，其他都可以正常使用

1. 如何防止一個圖標掉在另一個圖標之上？ （或者，僅允許將圖標拖放到一個空的div中？）
2. 如果我想創建第二組圖標並復制該過程，如何將它們和允許的放置區域分開？ （這樣圖標就不會出現在意想不到的地方）

謝謝一堆。

Answer 1

使用它，它對我的​​腳本有效...為了防止div下降，div中已經有類似圖像的內容。

if (ev.target.hasChildNodes()) {
    ev.target.appendChild(document.getElementById(data));
}

Answer 2

對於＃1，您需要使drop功能更加智能。 在其內部，在附加Child之前檢查以確保沒有childNodes 。

＃2，你需要做兩drag和drop更聰明。 在drag ，您需要查看目標並設置一些組信息。 在drop ，您需要檢查該信息以查看其是否正確匹配。

我可以告訴您＃1應該是什么樣的：

function drop(ev)
{
    ev.preventDefault();
    if (ev.target.hasChildNodes()) { return; }
    // ...all the rest as you had it

對於＃2，這要復雜一些，具體取決於您要如何定義第二組圖標。 通常，它應該使您的代碼看起來像這樣：

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
    // I'm going to assume your group1 items will have "group1" in their id.  Set it up however you want.
    if (ev.target.id.indexOf("group1") != -1) {
        ev.dataTransfer.setData("Group", 1);
    } else {
        ev.dataTransfer.setData("Group", 2);
    }
    // ...all the rest as you had it
}

function drop(ev)
{
    ev.preventDefault();
    if (ev.target.hasChildNodes()) { return; }
    if (ev.target.id.indexOf("group1") != -1 && ev.dataTransfer.getData("Group") == 2 ||
        ev.target.id.indexOf("group2") != -1 && ev.dataTransfer.getData("Group") == 1) {
            return;
        }
    // ...all the rest as you had it

Answer 3

我最后只是添加

ev.target.appendChild(document.getElementById(data).cloneNode(true));

到drop命令的末尾，這樣我就不會丟失圖標。 這是問題1的解決方法，因為我無法防止基於目標div的子節點刪除拾取的數據。 我可以使用if (ev.target.hasChildNodes()) { return; } if (ev.target.hasChildNodes()) { return; }

，但我仍然會丟失通過拖動獲取的數據，而不是像我希望的那樣拒絕刪除。 最好使用上面的代碼復制它們。 元素亂序掉落的問題是由id中的錯字引起的。 Scott的將圖標分為幾組的方法效果很好。

Answer 4

我為解決這個問題所做的事情也許很奇怪，但是確實有效！ 我剛剛做了這個功能：

function testDiv(ev, x) {
    if (x.length > 0) {
        return false;
    }
    else {
        allowDrop(ev);
        return true;
    }
}

在調用allowdrop之前，我先調用此函數。 x是div的innerHTML 。 它非常適合我！