HTML5 如何实现拖放'N'拖放

Myth丶恋晨 2022-05-20 02:41 263阅读 0赞

在网络开发人员需要掌握的所有技术中，看起来最容易造成混淆和潜在问题的是拖拽。

这不是一项新技术，它已存在多年，但许多开发人员仍然执着于基于jQuery的旧方法，以牵连复杂（有时很慢且不准确）的拖放模拟。

现在HTML5包含一个拖放API，您已经有了一个非常简单的方法来实现无拖放拖放。

## 理解力学 ##

拖放很容易理解。你有一个物体和一个目标。目标是允许用户点击对象并将其拖动到目标，然后您的应用程序需要做出适当的响应。

## 创建一个网页模板 ##

这很简单，但我们需要有一个地方来放置所有的代码项目。您可以创建的最基本的网页模板是：

1.  <！DOCTYPE html>
2.  < html >
3.  < head > 
4.  </ head > 
5.  < body > 
6.  </ body > 
7.  </ html >

## 定义一个可拖动的对象 ##

你可能期望在这里有一些复杂的类似Java的定义，但实际上它就像在你的body部分的一个元素上设置一个“可拖动”属性一样简单，就像这样：

1.  <div>
2.  < imgid = “dragMe”src = “pic.jpg”draggable = “true” >
3.  </ div >

正如你所看到的那样，这部分非常简单。事实上，对于某些浏览器，您甚至不需要为某些元素类型指定属性，但无论如何，仍然是一个好主意。

## 定义目标 ##

目标是可以将对象拖到的区域。同样，这很简单，你只需要给目标一个CSS ID属性。

1.  <div id =  “drop\_target”  >  
2.  炸弹离开！ 
3.  </ div >

## 添加一些CSS ##

我们应该确保一切都看起来应该看起来。将以下CSS样式信息添加到您的头部部分：

1.  <风格>  
2.  \#drop\_target \{ border ： 3  px solid＃ 000  ; 填充： 10 像素; 身高： 100 像素; 宽度： 100 像素;\}  
3.  \#dragMe \{ height ： 50  px; width： 50  px;\}  
4.  < / style>

## 实现JS功能 ##

这一步只是为了确保你的应用程序知道对象的存在，并且它应该与它们交互。如果您需要创建一系列事件侦听器，则可以采取复杂的方法，但您并不需要任何精心处理基本拖放操作的内容。

真的，我们只需要定义两个函数来处理所有的移动，dragObject和dropObject。

1.  <script>
2.  var  moved =  false  ;
3.  函数 dragObject（e）  \{   
4.  e.dataTransfer.effectAllowed = “移动”  ;  
5.  e.dataTransfer.setData（ “obj1” ，e.target.id）;
6.  返回 false  ;  
7.  \} 
8.  functiondropObject（e） \{ 
9.  if （moved == true ）\{ 
10. return false  ;  
11. \} 
12. var  received = e.dataTransfer.getData（ “obj1” ）;  
13. e.dataTransfer.dropEffect = “move”  ;  
14. e.preventDefault（）;  
15. e.stopPropagation（）;  
16. e.target.appendChild（ document.getElementById （received））;  
17. 移动= 真  ;
18. 返回 false  ;  
19. \}  
20. < / script>

例如，有关防止默认值和停止传播的内容只是为了覆盖默认的浏览器行为，例如可能导致它尝试在某处导航或打开图像。已移动的变量可防止在执行操作后执行代码。

## 修改对象声明和目标声明 ##

如果功能从未被调用，则不会发生任何事情。你只需要像这样改变对象和目标的声明：

和

<div id = “drop_target” ondragover = “event.preventDefault（）;” ondrop = “dropObject（