Question

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

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

我不明白为什么元素（在这种情况下是图像）在彼此拖动时叠加：有什么方法可以防止这种情况发生？所以当有人试图将可拖动元素拖到另一个可拖动元素之上时，没有任何反应 - 希望有人有时间帮助:)

Answer 1

我看到混乱的来源。将来，我建议您从多种信息来源学习，这样您就可以了解课程可能会忘记的内容。

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

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

工作属性是：

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

这里的教训的关键在于div能够“放弃”某些东西的能力是允许具有该能力的东西。换句话说：如果它没有必要的属性来执行脚本的行为，那么它将不被允许（因为'drop'条件，意味着'拖动'元素被'删除'在元素上。 .. ondrop="drop(event)" ondragover="allowDrop(event)"
......属性设定得恰当，尚未得到满足）

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

请注意如何将“小猫”放在“无效”元素上，红色突出显示仍然存在。这是为了表明此处的脚本完成了“drag”功能，但没有完成“drop”功能。 “drag”会创建红色效果，“drop”会隐藏它们。该脚本通过更改所述效果的相应CSS属性来实现此目的。
我提供了多个Codepen示例来展示不同选项卡/窗口的使用情况，与W3Schools示例形成对比（要彻底并演示如何在不使用'script'或“style”标签的情况下看起来如何）
我决定在脚本中使用最基本的代码，例如分别为每个div设置CSS属性，并重复使用相同的变量。除了实验之外，我不建议像这样写它。
我在里面添加了评论，以帮助您了解每个更难处理的部分。

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

希望这有帮助！

Answer 2

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

我想创建这个 What i want to create

具有不同元素的列表，可以在拖动区域来回拖动 - 取决于用户想要的内容：元素应该如何无法相互拖曳，因为其中一个元素会消失< / p>

然后，第二步是编写一些能够理解拖动区域所包含的元素的内容，然后使用PHP向用户发送一封包含chossen元素名称的电子邮件 - 但这完全不同：D

statement :: Parser Stmt
statement = do
    ss <- sepBy1 statement' (reserved ";")
    if length ss == 1
        then return $ head ss
        else return $ foldr1 Colon ss

statement' :: Parser Stmt
statement' = assignStmt
            <|> writeStmt
            <|> readStmt
            <|> whileStmt
            <|> ifStmt
            <|> skipStmt

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

任何善于拖放的人

2 个答案: