JavaScript拖放呈现出奇怪的行为

我试图创建一个拖放表单生成器，并且我遇到了一些奇怪的问题与我的基本拖动事件处理程序。JavaScript拖放呈现出奇怪的行为

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

这是遗传问题吗？有什么我可以做的，以防止可拖动的物品行为像放置目标？

谢谢！

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; 
}

来源

2016-06-28 Jon

尝试错误，而不是真正作为addeventlisteners第三个参数连接到下降的div。

来源

2016-06-28 21:17:50

我实际上添加了true来尝试和解决这个问题（false是默认值），但继续前进，并明确表示false，并尝试了一下。行为完全一样。 – Jon

我试过你的代码，并且可拖动的div不像具有drop listeners的元素。你能更准确地描述他们的行为吗？ –

当dragenter事件被捕获时，“over”类被应用到目标......在这种情况下，这意味着当我拖拽test1到目标时，它会按预期工作，但如果我拖拽其中一个元素测试1，该类被应用于该元素。确实，它并没有成为一个下降的目标，这是我混乱的一部分。我相信这只是因为我在实际执行删除操作之前检查目标是否有drop类。 – Jon

JavaScript拖放呈现出奇怪的行为

回答

相关问题