任何擅长拖放的人

Question

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

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

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

Answer 1

我知道混乱来自哪里。将来，我建议从多种信息源中学习，以便您了解课程中可能忘记涵盖的内容。

以最初编写示例的方式，将属性添加到 div 以允许其将“可拖动”内容“拖放”到其上。这是示例中代码的摘录，后面是注释行来解释使用的两个属性。

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

工作属性是：

• ondrop="drop(event) 删除元素时执行“事件”
• ondragover="allowDrop(event)" 允许“丢弃”发生。

---

这里课程的关键是 div 能够在其上“放置”一些东西是允许具有该能力的东西。换句话说：如果它没有必要的属性来执行脚本的行为，那么它就不会被允许（因为 'drop' 条件，意味着 'dragged' 元素被'drop' 到了一个带有 . ..
ondrop="drop(event)" ondragover="allowDrop(event)"
...属性设置得当，没有满足）

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

• 请注意，如果小猫被“丢弃”到“无效”元素上，红色突出显示将如何保持。这是为了说明这里的脚本完成了'drag'函数，但没有完成'drop'函数。 'drag' 创建红色效果，'drop' 隐藏它们。该脚本通过更改所述效果的相应 CSS 属性来实现这一点。
• 我提供了多个 Codepen 示例来展示不同选项卡/窗口的使用情况，与 W3Schools 示例形成对比（要彻底并演示不使用“脚本”或“样式”标签时的外观） .
• 我决定在脚本中尽可能使用最基本的代码，例如分别为每个 div 设置 CSS 属性，以及重复使用相同的变量。除了实验，我不建议在任何地方都这样写。
• 我在内部添加了 cmets，以帮助您了解每个更坚固的部分的作用。

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>