html 拖放,html可视化拖拽布局

　　一、什么是拖放

　　拖放就是把鼠标放在一个对象上，按住鼠标把一个对象移动到另一个位置。其实平时一直都有联系，如图。

　　然后在网页上实现同样效果的拖拽功能，如图。

　　然后，我们来看看如何实现。

　　二、拖放事件

　　在IE4中，Js可以实现拖拽功能。当时只支持拖拽图片和一些文字。后来随着IE版本的更新，拖拽事件逐渐完善。HTML5用IE的拖拽功能制定了规范，Firefox 3.5、Safari 3、chrome及其以后的版本都支持。

　　默认情况下可以拖动网页中的图片、链接和文本，如果要拖动其他元素，必须将draggable属性设置为true，这是HTML5中新规定的属性，用于设置元素是否可以拖动。所以图片、链接、文本的draggable属性默认为真，其他元素的draggable属性默认为假。

　　拖放功能的实现有两个概念，分别是被拖动元素和目标元素。他们都有自己支持的活动，我们来看看。

　　(1)被拖动元素的事件

　　下表显示了拖动元素支持的事件。

　　事件dragtart在被拖动的元素准备好被拖动时触发，在拖动过程中触发(经常触发)，在dragend拖动时触发。

　　让我们用一个例子来测试这三个事件。

　　！DOCTYPE html html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，initial-scale=1.0 title文档/标题样式。box { width:100px；高度：100px背景色：浅绿色；}/style/head body divdraggable= true /div script let box=document . query selector(。box )//绑定dragstart事件box . addevent listener( dragstart ，function () {console.log(拖放开始)；})//绑定拖动事件box.addeventlistener (drag ，function () {console.log(元素被拖动)；})//bind dragend事件box.addeventlistener (dragend ，function(){ console . log( drag end )；}) /script/body/html我们来看看测试结果

　　(2)目标元素的事件

　　在实现拖放功能的过程中，目标元素上有如下三个事件

　　事件dragenter在被拖动的元素进入目标元素时触发dragover，dragleave在被拖动的元素位于目标元素内部时触发(频繁触发)，drop在被拖动的元素离开目标元素时触发，drop在被拖动的元素被放入目标元素时触发。

　　这里我将详细解释这三个事件的触发规则：

　　dragenter事件类似于mouseover事件，那么被拖放的元素如何进入目标元素呢？经过测试发现，当拖放的元素有一半以上的面积在目标元素中时，输入目标元素dragover事件是比较特殊的。当拖放的元素进入目标元素时，它总是会触发，就像你设置了一个无限循环定时器一样。即使你不移动元素，它也会触发。除非拖放事件结束或者被拖动元素离开目标元素dragleave事件，否则其触发条件正好与dragenter事件相反。当被拖动的元素离开目标元素时，它被触发。经过测试，离开目标元素的条件是被拖动元素的一半以上离开目标元素drop事件，可以称为drop target事件，当被拖动元素放入目标元素时触发。虽然任何元素都支持这个事件，但是默认情况下不允许放置所有元素，所以不做任何处理不会触发这个事件。我们用具体的例子来体验一下前三个事件。

　　！DOCTYPE html html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，initial-scale=1.0 title文档/标题样式。box { width:100px；高度：100px背景色：浅绿色；} .位置{宽度：100px高度：100px背景色：浅粉色；}/style/head body div draggable= true /div div/div script let located=document . query selector(。location) //绑定dragenter事件located . addevent listener( drag enter ，function () {console.log(元素进入目标元素))；})//绑定dragover事件located . addevent listener( dragover ，function () {console.log(元素在目标元素中)；})//bind drag leave event located . addevent listener( drag leave ，function(){ console . log( element leaves target element))；}) /script/body/html我们来看看测试结果。这里要仔细看被拖放元素区域进入或离开目标元素时触发的相应事件。

　　最后，我们来讨论如何触发drop事件，只需停止dragenter事件和dragover事件的默认行为。

　　！DOCTYPE html html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，initial-scale=1.0 title文档/标题样式。box { width:100px；高度：100px背景色：浅绿色；} .位置{宽度：100px高度：100px背景色：浅粉色；}/style/head body div draggable= true /div div/div script let located=document . query selector(。location )located . addevent listener( drag enter ，Function(e){ e . prevent default()})located . addevent listener( dragover ，Function(e){ e . prevent default()})located . addevent listener( drop ，Function(){ console . log( element placed ))；}) /script/body/html查看测试结果。

　　值得注意的是，当我们在处理drop事件之前将被拖动的元素拖入目标元素时，鼠标样式会变成禁止使用的样式，如图所示。

　　当我们将元素设置为可放置时，鼠标样式是这样的。画

　　三、dataTransfer对象

　　上面只是简单的实现了拖拽功能，并没有利用这个功能做出什么实用的功能。这里我们介绍一个拖放事件中事件对象上特别重要的属性——dataTransfer。

　　我们通过event.dataTransfer得到这个对象，它的主要作用是将一个字符串数据从被拖动的元素传递到目标元素。

　　(1)方法

　　数据传输有两种方法，如下表所示。

　　意思是setData设置字符串，设置数据类型getData得到对应数据类型的字符串。

　　setData()方法接收两个参数，第一个参数表示字符串的数据类型，HTML5指定了两种数据类型，即text/plain和text/uri-list，前者表示常用字符串，后者表示URL字符串；第二个参数是用于存储的字符串。

　　getData()方法只接收一个参数，即要接收的字符串的类型。

　　我们简单用一下这两种方法。

　　！DOCTYPE html html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，initial-scale=1.0 title文档/标题样式。box { width:100px；高度：100px背景色：浅绿色；} .位置{宽度：100px高度：100px背景色：浅粉色；}/style/head body div draggable= true /div div/div script let box=document . query selector(。box)//绑定dragstart事件box . addevent listener( dragstart ，function(e){//对于被拖动的元素，设置text/plain类型的字符串e . data transfer . setdata( text/plain )，我是拖放开始时设置的字符串)})let located=document . query selector(。location )located . addevent listener( drag enter ，Function(e){ e . prevent default()})located . addevent listener( dragover ，Function(e){ e . prevent default()})located . addevent listener( drop ，Function(e) {//当拖放的元素放在目标元素上时，获取字符串let RES=e . data transfer . Get data( text/plain )console . log(RES)；}) /script/body/html查看测试结果。

　　(2)属性

　　dataTransfer对象有两个通用属性，如下表所示。

　　属性dropEffect是拖放元素的拖放行为。目标元素支持的拖放行为是effectAllowed。

　　首先，这两个属性需要一起使用。它们决定了被拖放元素和目标元素之间的关系。当它们之间的关系设置好后，拖动时，鼠标会根据不同的关系显示不同的样式。除此之外，没有其他特殊功能。

　　dropEffect您可以设置以下属性

　　意味着没有默认值。不能将拖动的元素放在这里。move应该将拖动的元素移动到目标元素。copy应该将拖动的元素复制到目标元素。link是指目标元素会打开被拖动元素对应的链接。

　　【注意】:dropEffect属性必须设置在dragenter事件，否则无效。

　　effectAllowed您可以设置以下属性

　　意味着未初始化的被拖动元素的可放置性未设置为none，被拖动元素不能具有copy的可放置性，只允许值为“copy”的dropEffect目标元素，Link只允许值为“link”的dropEffect目标元素，move只允许值为“move”的dropEffect目标元素copyLink只允许值为“copy”和“link”的drop effect目标元素。copymove仅允许dropEffect目标元素具有值“copy”和“move”。linkMove只允许dropEffect目标元素具有“link”和“Move”值。all只允许dropEffect目标元素具有任意值。

　　【注意】:effectAllowed属性必须设置在dragstart事件，否则无效。

　　如上所述，这两个属性基本上只用于改变鼠标样式，所以如果要实现特定的功能，我们必须自己重写事件处理程序。

　　让我们来看一个拖放的例子：

　　需求：将一段文本拖放到元素中

　　因为文本是默认支持的拖放元素，所以我们不必将任何事件绑定到它。

　　！DOCTYPE html html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，initial-scale=1.0 title文档/标题样式。位置{宽度：100px高度：100px边框：1px纯黑；} /style/headbody div class=box 我是测试文本/div div class= location /div script let located=document . query selector(。location )located . addevent listener( drag enter ，Function(e){ e . data transfer . drop effect= copy e . prevent default()})located . addevent listener( dragover ，Function(e){ e . prevent default()})located . addevent listener( drop ，Function(e){ e . target . innerhtml=e . data transfer . get data( text/plain )))/script/body/html测试动画

　　四、结束语

　　以上就是本文关于HTML5实现拖放功能的方法的分步分析。有关HTML5拖放功能的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。