我不明白阻力的几个部分拖放

这是我的代码：我不明白阻力的几个部分拖放

<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是文本？是图像没有文字。

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

4）为什么事件（ondrogover和ondrop）使用event.preventDefault？一个事件是不够的？

来源

2016-05-22 Ehsan

首先。 SO不是一个编码学校。

但问题不像noob，因为它看起来。
要这样问，我有这样的感觉，@ehsan当然要阅读整个W3C页面，他拿他的代码示例。（http://www.w3schools.com/html/html5_draganddrop.asp）

好吧，所以哥们想要对这个拖放事物做更具体的解释...到每个方法和事件的深度。
而这个非常基本的W3C解释并不能满足它的知识需求。
好学生！

让我们尝试回答它！
首先，让我们来看看事件的命令：

的对象是针对作为在它点击鼠标保持可拖动对象。这是可能的，因为这个元素被定义为：draggable="true"

这里，事件是ondragstart。它触发drag()函数，在一个dataTransfer对象中“设置数据”。直到他拖过来已定义做一些指定事件ondragover元素

2-用户可以只要他想拖动它无论在视口中无任何影响...
。

在我们的例子中，它是调用的allowDrop()函数。
这是一个简单的函数，说«防止默认»。
多看书这里：http://www.w3schools.com/jsref/event_preventdefault.asp

在我们的情况下，删除默认阻止砸在它里面的东西。
为什么？：因为它是网页的每个元素的默认值。因此，我们必须尽快撤销此块。

用户最终释放他的鼠标按钮通过此下拉使能元素。
因此ondrop事件被触发，其中调用drop()函数。

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

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

-----现在
答案！ ;）

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

问题＃2：数据类型为«text»，因为附加的数据是文本格式（一个HTML元素，因为您将它写入纯文本编辑器中）。它可以是一个图像，一个链接，一个按钮......无论如何。

问题3：这是一个ID。在这种情况下，“目标”元素的ID将被拖动。
（我们在功能drag()和我们仍然在元素被拖动）

这是不一样的«目标»在drop()功能（当用户在启用滴元素），因为这现在是其他事件的“目标”。

问题＃4：您可能已经明白，在删除之前，您必须启用删除，因为它在默认情况下被阻止。就像在入门之前打开一扇门一样简单。

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

来源

2016-05-22 02:58:37

我不明白阻力的几个部分拖放

回答

相关问题