Question

我正在学习html中的拖放程序，我尝试了下面的代码。

<html>
<head>
  My head 
<script>
function dragme(event)
{
  event.dataTransfer.setData("sourceID", event.target.id);
}

function dropHere(event)
{
  event.preventDefault();
  alert ("inside drop Here..");
}

function dropOver(event)
{
  console.log ("inside drop Over..");
}

</script>
<style>

div {width:500px;height:400px;border-color:red;border-style:solid;}
</style>
</head>
<body>
<div id="sourcedrag" ondrop="dropHere(event)" ondragover="dropOver(event)"> 
inside div
</div>
<button draggable=true id="button" ondragstart="dragme(event)" >Press me </button>
<button draggable=true id="button1"> Second Press me </button>
<button draggable=true id="button2"> Second Press me </button>
<button draggable=true id="button3"> Second Press me </button>
<button draggable=true id="button4"> Second Press me </button>
</body>
</html>

不幸的是，dropHere中的警告框未被调用。但是dropOver控制台消息正在打印。我做错了什么？

Answer 1

您还需要将event.preventDefault();添加到dropOver功能中。

澄清：

来自Mozilla：

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets

“网页或应用程序的大多数区域都不是丢弃数据的有效位置。因此，这些事件的默认处理不允许丢弃。

如果您希望允许删除，则必须通过取消事件来阻止默认处理。您可以通过从属性定义的事件侦听器返回false，或通过调用事件的preventDefault（）方法来执行此操作。“

Answer 2

link

我添加了

的功能

function allowDrop(ev) {
    ev.preventDefault();
}

我从sourceDrag div调用它。另外，我添加了双引号draggable="true"而不是draggable=true

 <html>
    <head>
      My head 
    <script>
function dragme(event)
{
  event.dataTransfer.setData("sourceID", event.target.id);
}

function dropHere(event)
{

  alert ("inside drop Here..");event.preventDefault();
}

function dropOver(event)
{
  console.log ("inside drop Over.."+event);
}
function allowDrop(ev) {
    ev.preventDefault();
}
</script>
<style>

div {width:500px;height:400px;border-color:red;border-style:solid;}
</style>
</head>
<body>
<div id="sourcedrag" ondrop="dropHere(event)" ondragover="allowDrop(event)" ondragover="dropOver(event)"> 
inside div
</div>
<button draggable="true" id="button" ondragstart="dragme(event)" >Press me </button>
<button draggable="true" id="button1"> Second Press me </button>
<button draggable="true" id="button2"> Second Press me </button>
<button draggable="true" id="button3"> Second Press me </button>
<button draggable="true" id="button4"> Second Press me </button>
</body>
</html>

HTML5 drop事件未被触发。

2 个答案: