Question

这是我的代码：

<html>
    <head>
        <style>
            #div1 {
                width:350px;
                height:70px;
                padding:10px;
                border:1px solid #aaaaaa;
            }
        </style>
        <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>
        <p>Drag the W3Schools image into the rectangle:</p>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <br>
        <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
    </body>
</html>

问题：

1）为什么要使用document.getElementById（data）？数据是可变的无ID。

2）为什么第一个参数setData中的数据类型是文本？是图像没有文字。

3）第二个参数setData是Element还是id？

4）为什么两个事件（ondrogover和ondrop）都使用event.preventDefault？对于一个活动来说还不够吗？

Answer 1

首先。 SO不是编码学校。

但问题并不像它看起来那样 noob 要问这样，我觉得 @ehsan 肯定会阅读整个W3C页面，在那里他拿了他的代码示例。（http://www.w3schools.com/html/html5_draganddrop.asp）

好的，所以老兄想要对这种拖放事物进行更具体的解释......到每个方法和事件的深处。
而这个非常基本的W3C解释并不能满足它的知识欲望 好学生！

我们来试试吧！首先，让我们看一下事件顺序：

1 - 鼠标单击对象时，对象将被定位为可拖动对象。这是可能的，因为此元素定义为：draggable="true"

此处，活动为ondragstart。它触发drag()函数，在dataTransfer对象中设置«数据»。

2 - 用户只要他愿意，就可以在视口中的任何位置拖动它而不会产生任何影响...
    直到他将其拖放到具有指定事件ondragover的元素上才能执行某些操作
    在我们的例子中，它是被调用的allowDrop()函数     这是一个简单的功能，说“防止默认” 在这里阅读更多内容：http://www.w3schools.com/jsref/event_preventdefault.asp

    在我们的例子中，它删除了默认阻止以丢弃其中的内容     为什么？：因为它是网页的每个元素的默认值。     所以我们必须尽快删除这个区块。

3 - 用户最终将鼠标按钮释放到此启用了drop的元素上因此触发ondrop事件，调用drop()函数。

此函数实际上将“target”元素（此时悬停的元素）与最初由用户拖动的完整HTML对象定义（作为文本！）附加。

Javascript如何知道拖动了哪个元素？它将它放在事件dataTransfer创建的ondragstart对象中这个完整的HTML对象是TEXT ... drag()函数的结果。

的 -----
现在回答！ ;）

问题＃1 ：变量«data»包含一个id（这里是javaScript的基本知识）。

问题＃2 ：数据类型为“text”，因为附加的数据采用文本格式（与您在纯文本编辑器中编写的HTML元素一样）。它可以是图像，链接，按钮......无论如何
问题＃3 ：这是一个id。在这种情况下，“目标”元素的ID将被删除。
（我们处于功能drag()，我们仍然在要拖动的元素上面）

这与drop()函数中的“目标”不同（当用户在启用了drop的元素上时），因为这现在是另一个事件的“目标”。

问题＃4 ：您可能已经理解在删除之前，必须启用删除功能，因为它在默认情况下被阻止。喜欢在进入之前打开一扇门。就这么简单。

的 -----
对DataTransfer对象的更多阅读：https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

我不明白拖放的几个部分

1 个答案: