不明白拖放几个部分

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(数据)？数据是可变的，没有 id。

2)为什么第一个参数setData中的data-type是text？是图片没有文字。

3)第二个参数setData是Element还是id?

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

Answer 1

首先。 SO 不是编码学校。

但是问题并不像看起来的那样菜鸟
这么问，我感觉@ehsan肯定读过他取代码示例的整个W3C页面。 ( http://www.w3schools.com/html/html5_draganddrop.asp )

好吧，伙计想要对这个拖放的东西有更具体的解释......深入到每个方法和事件。
而这个非常基本的 W3C 解释并不能满足它的知识胃口。
好学生！

让我们试着回答一下吧！
首先，让我们看看事件顺序:

1- 一个对象被定位为鼠标点击并按住它的可拖动对象。这是可能的，因为这个元素被定义为：draggable="true"

在这里，事件是 ondragstart。它触发 drag() 函数，该函数在 dataTransfer 对象中“设置数据”。

2- 用户可以随意将它拖到视口中的任何位置而不会产生任何影响...
直到他将它拖到一个元素上，该元素具有定义为执行某事的指定事件 ondragover。

在我们的例子中，调用的是 allowDrop() 函数。
这是一个简单的功能，上面写着 «prevent default»。
在此处阅读更多内容：http://www.w3schools.com/jsref/event_preventdefault.asp

在我们的例子中，它删除了默认阻止以在其中放置一些东西。
为什么？：因为它是网页每个元素的默认设置。所以我们必须尽快删除这个块。

3- 用户终于在这个启用了放置的元素上释放了他的鼠标按钮。
所以ondrop事件被触发，调用了drop()函数。

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

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

-----
现在回答！ ;)

问题 #1：变量 «data» 包含一个 id（这确实是 javaScript 的基础知识）。

问题 #2：数据类型是“文本”，因为附加的数据是文本格式（HTML 元素，就像您在纯文本编辑器中编写的那样）。它可以是一张图片、一个 link、一个按钮...随便什么。

问题 #3：这是一个 ID。在这种情况下要拖动的 «target» 元素的 id。
（我们在函数 drag() 中，我们仍在要拖动的元素上方）

这与 drop() 函数中的 «target» 不同（当用户位于启用放置的元素上方时），因为它现在是另一个事件的 «target»。

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

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

不明白拖放几个部分

I do not understand Several parts of drag and drop

javascript

draggable

不明白 拖放几个部分

I do not understand Several parts of drag and drop

javascript

draggable

不明白拖放几个部分