HTML5 如何实现拖放'N'拖放
发表于：2024-11-25 作者：热门IT资讯网编辑
编辑最后更新 2024年11月25日，在网络开发人员需要掌握的所有技术中，看起来最容易造成混淆和潜在问题的是拖拽。这不是一项新技术，它已存在多年，但许多开发人员仍然执着于基于jQuery的旧方法，以牵连复杂（有时很慢且不准确）的拖放模拟。
在网络开发人员需要掌握的所有技术中，看起来最容易造成混淆和潜在问题的是拖拽。
这不是一项新技术，它已存在多年，但许多开发人员仍然执着于基于jQuery的旧方法，以牵连复杂（有时很慢且不准确）的拖放模拟。
现在HTML5包含一个拖放API，您已经有了一个非常简单的方法来实现无拖放拖放。
理解力学
拖放很容易理解。你有一个物体和一个目标。目标是允许用户点击对象并将其拖动到目标，然后您的应用程序需要做出适当的响应。
创建一个网页模板
这很简单，但我们需要有一个地方来放置所有的代码项目。您可以创建的最基本的网页模板是：
<！DOCTYPE html>
< html >
< head >
< body >
定义一个可拖动的对象
你可能期望在这里有一些复杂的类似Java的定义，但实际上它就像在你的body部分的一个元素上设置一个"可拖动"属性一样简单，就像这样：
< img id = "dragMe" src = "pic.jpg" draggable = "true" >
正如你所看到的那样，这部分非常简单。事实上，对于某些浏览器，您甚至不需要为某些元素类型指定属性，但无论如何，仍然是一个好主意。
定义目标
目标是可以将对象拖到的区域。同样，这很简单，你只需要给目标一个CSS ID属性。
×××离开！
添加一些CSS
我们应该确保一切都看起来应该看起来。将以下CSS样式信息添加到您的头部部分：
<风格>
#drop_target { border：3 px solid＃000 ; 填充：10像素; 身高：100像素; 宽度：100像素;}
#dragMe { height：50 px; width：50 px;}
< / style>
实现JS功能
这一步只是为了确保你的应用程序知道对象的存在，并且它应该与它们交互。如果您需要创建一系列事件侦听器，则可以采取复杂的方法，但您并不需要任何精心处理基本拖放操作的内容。
真的，我们只需要定义两个函数来处理所有的移动，dragObject和dropObject。