Fatal编程技术网

如何使用javascript进行拖放

javascript html css

如何使用javascript进行拖放,javascript,html,css,Javascript,Html,Css,我创建了一个包含左右面板的拖放应用程序。当我将球从左面板拖动到右面板时，球被拖动。但问题是，当我拖动球时，不应在拖动球时将球从左面板中移除。同样，只应将球拖动/移动到右面板，而不应返回到左面板。下面是代码 让currentDroppable=null； ball.onmousedown=函数（事件）{ 设shiftX=event.clientX-ball.getBoundingClientRect（）.left； 设shiftY=event.clientY-ball.getBoundingCl

我创建了一个包含左右面板的拖放应用程序。当我将球从左面板拖动到右面板时，球被拖动。但问题是，当我拖动球时，不应在拖动球时将球从左面板中移除。同样，只应将球拖动/移动到右面板，而不应返回到左面板。下面是代码

让currentDroppable=null；
ball.onmousedown=函数（事件）{
设shiftX=event.clientX-ball.getBoundingClientRect（）.left；
设shiftY=event.clientY-ball.getBoundingClientRect（）.top；
ball.style.position='绝对'；
ball.style.zIndex=1000；
document.body.append（ball）；
moveAt（event.pageX，event.pageY）；
函数moveAt（pageX，pageY）{
ball.style.left=pageX-shiftX+'px'；
ball.style.top=pageY-shiftY+'px'；
}
mouseMove函数（事件）{
moveAt（event.pageX，event.pageY）；
ball.hidden=true；
让elemBelow=document.elementFromPoint（event.clientX，event.clientY）；
ball.hidden=false；
如果（！elemBelow）返回；
设droppableBelow=elemBelow.closest（'.droppable'）；
if（currentDroppable！=DropPableBlow）{
如果（currentDropable）{//null，则在此事件之前我们没有超过一个Dropable
可退出（当前可退出）；
}
currentDroppable=DropPableBlow；
如果（currentDropable）{//null，如果我们现在没有经过一个Dropable
//（可能只是离开了可下拉菜单）
可输入可删除（CurrentDropable）；
}
}
}
document.addEventListener（'mousemove'，onMouseMove）；
ball.onmouseup=函数（）{
document.removeEventListener（'mousemove'，onMouseMove）；
ball.onmouseup=null；
};
};
功能可输入可删除（elem）{
elem.style.background='pink'；
}
函数可删除（elem）{
elem.style.background=''；
}
ball.ondragstart=函数（）{
返回false；
};

#门{
光标：指针；
边缘底部：100px；
宽度：83px；
高度：46px；
边框：1px实心；
}
#球{
光标：指针；
宽度：40px；
高度：40px；
}


左窗格
右面板

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
左窗格
右面板

您能更准确地陈述您的问题吗？你说“不应该从左面板中移除”和“不应该回到左面板”。目前，从左到右拖动和拖动完全符合我作为用户的预期（除了左面板折叠，这可能不是问题。）是的，当你拖动时，它也应该在左面板上，也应该拖到右面板上。现在，一旦你拖动球，并且当你试图再次将它保持在左面板时，它不应该穿过右面板。由没有解释的代码组成的答案通常不会被很好地接受。也许您可以解释OP对哪些概念感到困惑，这些概念导致他们的代码表现出不受欢迎的行为，您的代码有哪些不同之处，以及/或为什么它代表了OP问题的良好解决方案。（也可以考虑将你的代码粘贴到你的答案中的一个堆栈溢出的“片段”中，这样访问者可以点击“运行片段”并看到它工作。当你拖动时，它应该在左面板上，也应该被拖拽到右面板。现在，一旦你拖动球，当你试图保持它再次左面板，它不应该越过右面板

    <head>
      <script>
        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");
          ev.target.appendChild(document.getElementById(data));
        }
      </script>
    </head>

<body>    
  <div style="float:left;border: 1px solid;width: 15%;" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    Left Pannel
    <img id="ball" src="https://en.js.cx/clipart/ball.svg" draggable="true" ondragstart="drag(event)">
  </div>
  <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"
    style="float: left;border: 1px solid;width: 80%;height: 1000px;">Right Panel</div>
</body>