怎么理解前端中的拖曳？拖曳交互过程解读

拖曳是页面中的元素从初始位置被拖动到新的位置的用户行为，如拖曳页面中的指定元素到另一个元素中。首先使用鼠标指针进入源对象，然后按住鼠标左键拖动源对象，当移动鼠标时源对象会跟随鼠标指针移动，如果源对象进入了目标对象，就松开鼠标左键让源对象放置在目标对象中。

在拖曳操作中，源对象表示被拖动的元素。为元素添加draggable属性可以设置此元素为源对象，示例代码如下：

<p draggable▪"true"></p>

上述代码设置<p>标签的draggable属性的值为true,表示<p>标签是一个可以被鼠标拖曳的源对象。需要注意的是，图片和链接默认是可以拖动的，它们不用添加draggable属性，就可以进行拖曳。

源对象进入的元素称为目标对象，目标对象可以是页面中的任一元素，示例代码如下：

<div></div>

<div>标签不需要设置draggable属性。

拖曳事件包括拖曳开始、拖曳进行中、拖曳结束等事件。在开发中，用户可以依靠拖曳事件来实现带有拖曳交互效果的页面。拖曳事件是由元素对象产生的，如源对象、目标对象，这些对象会产生不同的拖曳事件。源对象事件如表所示。

目标对象事件表如下：

需要注意的是，只有当源对象上的鼠标指针进入目标对象时，才会触发ondragenter事件。默认情况下，浏览器会默认阻止ondrop事件。如果想要触发该事件，则需要在ondragover事件中使用“retum false;”(或者e.preventDefaultO)来阻止其默认行为。

在源对象和目标对象的事件处理函数中，使用dataTransfer对象可以进行数据传输，示例代码如下：

// 通过 dataTransfer对象设置数据
event.dataTransfer.setData(format, data);
// 通过dataTransfer对象获取数据
event.dataTransfer.getData(format);

上述代码中，event表示事件处理函数的事件源对象，setData(format,data)方法用于将指定格式的数据设置给dataTransfer对象，参数format用于定义数据的格式，data表示待设置的数据：getData(format)方法可以从dataTransfer对象中获取指定格式的数据，format 表示数据的格式。

下面演示HTML5中拖曳事件的具体使用方法。

(1)创建C:codelchapter02demo09.html,定义源对象p和目标对象div页面结构，具体代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}div {width:200px;height:200px;border: lpx solid red;float: left;malin: 10px;}div:nth-child(2) {border: lpx solid green;}div:nth-child(3) {border: lpx solid blue;}p{height: 25px;background-color: pink;1ine-height: 25px;text-align: center;}</style>
</head>
<body><div id="divl"><p id="p1"draggable="true">施曳内容1</p><p id="p2"draggable="true">施曳内容2</p><p id="p3"draggable="true">拖曳内容3</p><p id="p4"draggable="true">拖曳内客4</p></div><div id="div2"></div><div id="div3"></div>
</body>
</html>

上述代码中，第33~40行代码定义了3个div盒子作为目标对象，元素id值分别是divl、div2和div3。在div1盒子中，放置了4个p元素作为源对象，这些元素的id值分别为p1、p2、p3和p4。

(2)保存代码，在浏览器中进行测试，效果如图。

(3)在第(1)步第40行代码后，编写如下代码，设置源对象的拖曳效果：

<script>// 当拖曳开始时触发document.ondragstart=function (event){console.log（'源对象开始被拖动');console.log (event.target.id);event.dataTransfer.setData('text/html',event.target.id);//传递id值};//作用于整个拖曳过程（不断地执行）document.ondrag=function(event){console.log（'源对象被拖动过程中'）；};//当拖曳结束时触发document.ondragend=function (event){console.log('源对象被拖动结束')；};
</script>

上述代码中，event.target用来获取触发事件的子盒子。由于源对象是可以在目标对象中任意来回拖动的，所以使用document作为父盒子，在这里将事件对象委托给document元素。第3-7行代码用于实现源对象被拖动时的数据存储。其中，第6行代码在拖曳操作时使用dataTransfer对象存储数据，该对象可以保存一项或多项数据，支持多种数据型(如URL、text/html类型)。dataTransfer对象的setDataO方法可以为一个给定的类型设置数据，传递 event.target.id 用于记录当前被拖曳的源对象的id。

(4)在浏览器中刷新浏览器页面，并打开控制台，查看源对象的事件过程，页面效果如图。

当拖动id为p4的元素“拖曳内容4”时，控制台中会打印出该元素的id值，以及源对象开始被拖动、被拖动过程中和被拖动结束时的一系列监听。读者可以根据控制台打印的数据来观察监听过程。

(5)继续编写如下代码，设置目标对象的释放效果：

//当源对象进入目标对象时
document.ondragenter=function (event){console.log（'目标对象被源对象拖动着进入'）；console.log (event.target);
};
//当源对象悬停在目标对象上方时触发
document.ondragover=function (event) {console.1og（'源对象悬停在目标对象上方'）：return false;
};
// 当源对象离开目标对象时
docuwlnt.ondragleave=function() {
console.log('离开了')；
};
//当源对象在目标对象上方释放鼠标时
document.ondrop=function (event){console.1og（'上方释放/松手'）；var id = event.dataTransfer.getData('text/html');event.target.appendChild(document.getElementById(id));
};

上述代码定义了应用于目标对象的一系列监听事件。第16~20行代码实现了当源对象在目标对象上释放(松开)鼠标时，将源对象放入目标对象的效果。其中，第18行代码使用dataTransfer对象的getData()方法，获取之前使用 setDataO方法存入的id值;第19行代码使用document.getElementByld)获取id值对应的元素，并使用appendChild()方法将其追加到event.target 目标对象中。

(6)在浏览器中刷新，然后进行拖曳操作，查看源对象进入目标对象的事件过程，页面效果如图。

怎么理解前端中的拖曳？拖曳交互过程解读相关推荐

语音交互设备前端信号处理技术和语音交互过程介绍
一.前端信号处理 1. 语音检测(VAD) 语音检测(英文一般称为 Voice Activity Detection,VAD)的目标是,准确的检测出音频信号的语音段起始位置,从而分离出语音段和非语音段 ...
前端中DOM是什么，怎样理解dom
前端中DOM是什么,怎样理解? 首先我们来说一下DOM是什么? 文档对象模型(Document Object Model,简称DOM).我个人认为他就是将,通过浏览器的一些规则解析后,在渲染成我们能够 ...
前端面试 vue生命周期钩子是如何实现的？理解vue中模板编译原理？
生命周期钩子在内部会被vue维护成一个数组(vue 内部有一个方法mergeOption)和全局的生命周期合并最终转换成数组,当执行到具体流程时会执行钩子(发布订阅模式),callHook来实现调用. ...
flask与js交互的示例代码_QT5.12 C++与前端JavaScript/HTML实现通信交互
"WebSocket connection to 'ws://localhost:12345/' failed: Error in connection establishment: net ...
mui实现手机web前端拍照_Web前端中的常见技术名称及所实现的功能
今天小编要跟大家分享的文章是关于Web前端中的常见技术名称及所实现的功能.熟悉Web前端工作的小伙伴都知道Web中有很多的技术,想要成为一名合格的Web前端工程师你必须要一项一项的掌握技术,如Html ...
你如何理解前端的工作(面试题)
入坑前端到今天也将近两年半了,这两天突然想到了第一次面试时面试官的一个问题-------你怎样理解前端的工作? 对于当时我一个小白而言完全是胡说一通,词不达意,搞得面试官一脸懵逼,现在想想那可能就叫尬 ...
领域驱动设计在前端中的应用
(文章末尾有抽奖送书活动) 垃圾桶现象在开始本篇文章前,我给读者们分享一个很考验人性的有趣现象,在公司洗手间的洗漱台旁边,放置了一个垃圾桶,每次我洗完手,用纸巾擦干手后,将其扔进垃圾桶,但是偶尔扔不 ...
php万国码,前后端交互过程中的编码
起因最近在写PHP,本身对PHP不太熟练.然后遇到编码这个问题,困扰了大半天,索性,系统探索解决一番. 前后端交互过程中涉及的编码 Browser cilent: 首先,浏览器的设置里有设置编码格式 ...
理解oracle中连接和会话
理解oracle中连接和会话 1. 概念不同:概念不同: 连接是指物理的网络连接. 在已建立的连接上,建立客户端与oracle的会话,以后客户端与oracle的交互都在一个会话环境中进行. 2. ...

怎么理解前端中的拖曳？拖曳交互过程解读

怎么理解前端中的拖曳？拖曳交互过程解读相关推荐

最新文章

热门文章