Javascript拖放表现出奇怪的行为

Question

我正在尝试创建拖放表单构建器，但我的基本拖动事件处理程序遇到了一些奇怪的问题。

具体来说，可拖动元素的行为就像它们具有来自放置目标的事件监听器，但是当我检查元素时，它们只有来自拖动元素的事件监听器。

这是继承问题吗？我可以做些什么来防止可拖动项目像放置目标一样？

谢谢！

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Test Page</title>
        <style>
            .drag 
            {
                border: solid;
                margin: auto;
                width: 80px;
            }
            .drop
            {
                border: solid;
                margin: auto;
                min-height: 100px;
                width: 100px;
            }
            .over 
            {
                border: 2px dashed #000;
            }
            .palette
            {
                position: absolute;
                top: 10px;
                left: 10px;
            }
        </style>
    </head>
    <body>
        <script src="test.js"></script>

        <div id="palette" class="palette">
            <div id="1" draggable="true" class="drag">Test 1</div>
            <div id="2" draggable="true" class="drag">Test 2</div>
            <div id="3" draggable="true" class="drag">Test 3</div>
            <div id="4" draggable="true" class="drag">Test 4</div>
            <div id="5" draggable="true" class="drag">Test 5</div>
        </div>
        <div id="target" class="drop">


        </div>

    </body>
</html>

Javascript：

window.onload = initall;    

function initall() 
{   
    var allDivs = document.getElementsByTagName('DIV');
    for (var i = 0; i < allDivs.length; i++) 
    {
        if(allDivs[i].className == "drag") 
        {
            allDivs[i].addEventListener('dragstart', handleDragStart);
            allDivs[i].addEventListener('dragend', handleDragEnd);

        }

        if(allDivs[i].className == "drop") 
        {
            allDivs[i].addEventListener('dragenter', handleDragEnter,true);
            allDivs[i].addEventListener('dragover', handleDragOver,true);
            allDivs[i].addEventListener('dragleave', handleDragLeave,true);
            allDivs[i].addEventListener('drop', handleDrop,true);


        }
    }
}


/*
 * Functions for element being dragged
 */

function handleDragEnd(ev)
{
    ev.target.style.opacity = '1';
}
function handleDragStart(ev) 
{
    ev.target.style.opacity = '0.4';
    ev.dataTransfer.effectAllowed = 'move';
    ev.dataTransfer.setData("text", ev.target.id);
} 

/*
 * Functions for drop target
 */

function handleDragEnter(ev) 
{

    ev.target.classList.add('over');

}
function handleDragLeave(ev) 
{
    ev.target.classList.remove('over');
}

function handleDragOver(ev) 
{
    if (ev.preventDefault) {
        ev.preventDefault();
    }
    ev.dataTransfer.dropEffect = "move";

}
function handleDrop(ev) 
{
    if (ev.preventDefault) {
        ev.preventDefault();
    }

    if(ev.target.className.indexOf("drop") > -1)
    {
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
        ev.target.classList.remove('over');
    }
    return false;
}

Answer 1

尝试使用 false 而不是 true 作为附加到 drop div 的 addeventlisteners 中的第三个参数。