如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
HTML5中的拖（Drag）与放（Drop）
来源：互联网
2023-03-16 19:10:53 253
现当今网页的设计与制作中，人机交互是一个十分重要的环节。一个网页首先吸引人的不是内容，而是界面。这与处对象一样，首先颜值要过关，别人才会去了解你的内在。不然即使内在再完美，你也会缺少被人了解的机会。
今天我们就来说明一下如果利用HTML5中的（Drag）与放（Drop）来与网页进行人机交互。
方法/步骤
网页元素的拖放：
通常我们看到的网页上各元素的位置都是固定的，虽然可以通过输入或点击来与网页进行交互，但程度上比较单一。
HTML5可以支持网页上任何元素的拖放了。就像在电脑操作系统中，你可以把一张图片拖动到文件夹一样。以此为例，有以下概念需要记住：
1. 一次拖放涉及到两个主体：
拖动的主体：图片
接受的主体：文件夹
2. 拖放过程中发生的事件：
图片：开始被拖动，拖动中，拖动结束；
文件夹：图片拖动着进入，图片悬停，图片离开，图片鼠标释放。
3. 数据的传递：
图片在拖动时，坐标在不停的发生变化；
图片从文件夹外移动到了文件夹内，所以在目录内容上数据发生的变化。
下文中把【图片】称为源对象；把【文件夹】称为目标对象。
可拖动的对象：
在HTML5中要使一个元素变成可拖动的元素很简单：
img draggable="true">
在任何元素中加上上面代码中粗体部分的标记就行了。
源对象ondragstart事件：
在该事件中，主要有两件事可以做：
1. 设置要传递给目标对象的数据；
2. 记录源对象的初始坐标（在要移动源对象时才需要，你可以观察桌面拖动的情况，拖动时源对象并没有动。）。
示例代码如下（jquery）：
$(".drag_object").on("dragstart", function (e) {
cur_drag_obj.xPos = e.offsetX;
cur_drag_obj.yPos = e.offsetY;
// jquery传递数据
e.originalEvent.dataTransfer.setData("obj_add", $(this).attr("id"));
// js传递数据
// e.dataTransfer.setData("Text", e.target.id);});
}
源对象ondrag事件：
该事件通常在你要实现源对象坐标时才会用到（如你要做一个打飞机的游戏什么的）。普通的应用可以不用管它。
示例代码如下（jquery）：
$(".drag_object").on("drag", function (e) {
// 实现代码
});
源对象ondragend事件：
该事件不用去管它，因为在拖动结束时，如果在目标对象上，有目标对象的ondrop事件来处理就够了。如果不在目标对象上，则拖动不起作用，更不需要管了。
目标对象ondragenter事件：
该事件一般也不需要去实现相应功能，因为有可能是误进入，如果在刚进入时就处理一堆东西在效率上不是很合理。应该把进入处理的功能放到ondragover事件上，会更有效率。
目标对象ondragover事件：
如果拖动的目标，已经悬停了一会，说明这就是真正的目标对象了。在这个事件中，可以实现一些特殊的效果来达到以下目的：
1. 实现鼠标释放后的预览效果，让用户感觉到是不是真的要释放；
2. 弹出一些隐藏的信息，来进一步的确认释放的必要性；
3. 让目录对象变成可以接收的对象。
示例代码如下（jquery）：
$(".drop_object").on("dragover", function (e) {
//默认无法将元素放置到其他元素中。所以要阻止对元素的默认处理方式。
e.preventDefault();
$(this).css("color", "red");
});
目标对象ondragleave事件：
该事件的主要功能是把在ondragover事件中实现的特殊效果进行复原。如果没有实现ondragover事件，那该事件通常也不需要进行实现。
目标对象ondrop事件：
该事件实现了在目标对象上释放鼠标后要完成的功能，如果没实现该事件，那么页面上的拖动效果也就没有意义了。
示例代码如下（jquery）：
$(".drop_object").on("drop", function (e) {
e.preventDefault();
// jquery传递数据
var id = e.originalEvent.dataTransfer.getData("obj_add");
// js传递数据
// var id = e.dataTransfer.getData("obj_add");
alert(id);
});
注意事项
- 如果对你有用请投票加收藏哦。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： HTML
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 431 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)