任何擅长拖放的人

Question

我坐在这里试图了解拖放 -（并不是说它特别难）但有一件事真的让我很紧张：我正在关注这个

http://www.w3schools.com/html/html5_draganddrop.asp

我不明白为什么元素（在本例中为图像）在相互拖动时会堆叠：有什么方法可以防止这种情况发生吗？这样当有人试图将一个可拖动元素拖到另一个可拖动元素之上时什么也不会发生 - 希望有人有时间提供帮助 :)

Answer 1

我明白了混乱的来源。以后，我建议多多学习，这样你就可以了解到课程中可能遗漏的内容。

按照示例最初编写的方式，属性被添加到 div 以允许其具有 'draggable' 内容'dropped'。下面是示例中的代码摘录，后跟注释行以解释所使用的两个属性。

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

工作属性为：

ondrop="drop(event) 删除元素时执行 'event'
ondragover="allowDrop(event)" 这允许 'drop' 发生。

这里课程的关键是 div 拥有某物 'dropped' 的能力是 某物被允许拥有该能力.换句话说：如果它没有执行脚本行为所必需的属性，则不允许执行（因为 'drop' 条件，这意味着 'dragged' 元素被 'dropped'在具有...
ondrop="drop(event)" ondragover="allowDrop(event)"
...属性设置适当的元素上，尚未满足）

我决定保留并编辑此示例并添加到演示级别，因为您已经熟悉它了。一些注意事项：

请注意，如果小猫 'dropped' 在 'invalid' 元素上，红色突出显示会保持不变。这是为了表明这里的脚本完成了'drag'功能，但没有完成'drop'功能。 'drag' 创建红色效果，'drop' 隐藏它们。该脚本通过更改所述效果的适当 CSS 属性来实现。
我提供了多个 Codepen 示例来展示不同 tabs/windows 的使用情况，与 W3Schools 示例形成对比（为了彻底并演示它在不使用“脚本”或 "style" 标签）。
我决定在脚本中尽可能使用最基本的代码，例如分别为每个 div 设置 CSS 属性，并重复使用同一个变量。除了实验，我不建议在任何情况下都这样写。
我在里面添加了评论，以帮助您了解每个较难的部分的作用。

http://codepen.io/anon/pen/WwdgbY
http://codepen.io/anon/pen/zqpJjo

希望对您有所帮助！

Answer 2

我认为如果我尝试解释我想要创建的内容可能会有所帮助

我想创建这个 What i want to create

一个包含不同元素的列表，可以来回拖动到拖动区域 - 取决于用户想要什么：元素应该如何不能相互拖动，因为其中一个元素会消失

然后第二步是写一些东西来理解拖动区域包含哪些元素，然后使用 PHP 向我发送一封电子邮件，其中包含用户选择的元素的名称 - 但这是完全不同的:D

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));
}
/*
if($("#div1").has(".drag-img").length)){

}
*/

 #element-box{
  border-radius: 10px;
  background-color: #333333;
  height: 50px;
  width:50px;
  display: inline-block;
  margin: 10px 20px;
 }

 #div1{
      width:400px;
      height:70px;
      padding:20px;
      border:1px solid #aaaaaa;
    }

    #drag1{
    background: red;
    }

    #drag2{
    background: blue;
    }

    #drag3{
    background: green;
    }

    #drag4{
    background: orange;
    }

    #drag5{
    background: hotpink;
    }

<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag1" src="img/one.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag2" src="img/two.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag3" src="img/three.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag4" src="img/four.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag5" src="img/five.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

任何擅长拖放的人

Anyone who are good with Drag and drop

html

javascript

css

drag-and-drop

draggable