html 拖放,html5拖动div

　　关于HTML5中的拖放

　　拖放(drag and drop)是一个常见的功能，即抓住一个对象，然后将其拖动到另一个位置。在HTML5中，拖放是一个标准组件。在HTML5中，用户可以使用鼠标选择一个可拖动的元素，将该元素拖动到一个可放置的元素上，并通过释放鼠标按钮将其放在这些元素上。在拖动操作期间，可拖动元素的半透明表示跟随鼠标指针。

　　如果我们想要元素被拖动，我们需要设置它的draggable属性为true(一个标签draggable的默认值为true)。

　　拖放的事件

　　在拖放操作的不同阶段会触发几个事件，拖放事件的dataTransfer属性存储拖放操作中的相关数据。

　　Dragstart作用于[源元素]，当一个元素开始被拖动时触发。用户拖动的元素需要附加一个dragstart事件。在这种情况下，侦听器将设置与这种拖动相关的信息，比如被拖动的数据和图像。Dragenter作用于[source element],当鼠标拖动进入一个元素时触发。该事件的侦听器需要指示是否允许在该区域释放鼠标。如果没有设置侦听器，或者侦听器不操作，默认情况下不允许释放。Dragover作用于[target element],当鼠标在拖动过程中移动到元素上时触发。Dragleave作用于[目标元素]，当拖动中的鼠标离开元素时触发。可以作为可释放反馈的突出显示或插入标记被移除。拖动作用于[源元素]，元素被拖动时触发事件。释放拖动操作时，Drop作用于[目标元素]并在释放的元素上触发。Dragend作用于[source element]，拖动操作结束时触发拖动源，无论操作成功与否。

　　(拖动时只会触发拖放相关事件。不会触发鼠标事件，如mousemove。)

　　DataTransfer 对象

　　在处理拖放操作时，我们需要使用DataTransfer对象来存储被拖动的数据。数据传输可以保存一个或多个数据和一个或多个数据类型。

　　属性

　　下降效应

　　[字符串]指定实际的放置效果。可能的值：

　　复制：复制到新位置。

　　移动：移动到新的位置

　　链接：建立从源位置到新位置的链接。

　　None:禁止放置(禁止任何操作)effectAllowed [String]指定拖动时允许的效果。可能的值：

　　复制：复制到新位置。

　　移动：移动到一个新的位置。

　　链接：建立从源位置到新位置的链接。

　　CopyLink:允许复制或链接。

　　CopyMove:允许复制或移动。

　　LinkMove:允许链接或移动。

　　全部：允许所有操作。

　　无：禁止所有操作。

　　未初始化：默认值(default value)，相当于all。包含数据传输中可用的所有本地文件列表的文件。如果拖动操作不涉及拖动文件，则该属性为空列表。Types将存储数据的类型列表保存为第一项，其顺序与添加数据的顺序一致。如果没有添加数据，将返回一个空列表。

　　方法

　　设置拖动源。通常情况下，您不需要更改此项。如果您更改此项，它将影响您拖动的哪个节点触发拖动事件。默认目标是被拖动的节点void clearData(String类型)删除与给定类型关联的数据。参数是可选的。如果该类型为空或未指定，则与该类型关联的所有数据都将被删除。如果没有指定类型的数据，或者数据传输不包含任何数据，此方法将不起作用。Getdata (stringtype)获取给定类型的数据。如果给定类型的数据不存在或者数据不包括在数据转储中，则该方法将返回一个空字符串。Voidsetdata (String Type，String Data)设置给定类型的数据。如果数据类型不存在，它将被添加到的末尾，这样类型列表中的最后一项将是新格式。如果该数据类型已经存在，请替换同一位置的现有数据。也就是说，当相同类型的数据被替换时，类型列表的顺序不会改变。拖动时自定义所需的图片。在大多数情况下，不会设置此项，因为被拖动的节点是作为默认图片创建的。

　　用作拖动反馈的图像元素。

　　图像内的x水平偏移量。

　　y图像中的垂直偏移量。

　　浏览器支持

　　Internet Explorer 9、Firefox、Opera 12、Chrome和Safari 5

　　演示代码

　　！DOCTYPE html html head meta charset= UTF-8 title Drop/title style type= text/CSS .box { display:inline-block；宽度：100像素高度：100像素边框：1px固体# ccccff背景色：# ccccff文本对齐：居中；行高：100px}。垃圾箱{宽度：200像素高度：200像素填充：10px边框：1px固体# ccccff溢出：隐藏；浮动：左；}/style/head body div style= display:table；div class= bin div class= box draggable= true 可拖拽元素/div/div div class=" bin " nbsp ./div/div脚本type= text/JavaScript var bins=document。查询选择器全部(.bin’)；var boxs=文档。查询选择器全部(.框);var drag=null for(var I=0；I box s . length I){ var box=boxs[I]；盒子。onselectstart=function(){ return false；};盒子。ondragstart=函数(e){ e .数据传输。允许的效果= movee .数据传输。setdata(文本/普通，e .目标。外层html)；e .数据传输。setdragimage(e . target，0，0)；拖=这个；返回true }；盒子。ondragend=function(e){ drag=null；返回false }；} for(var I=0；我箱柜。长度；I){ var bin=bins[I]；//当拖曳元素进入目标元素斌。ondragover=function(e){ e . preent default()；返回true }；//拖拽元素在目标元素上移动斌。ondragenter=function(e){ this。风格。背景色= # eeeeff返回true }；//拖拽元素在目标元素上离开斌。ondragleave=function(e){ this。风格。背景色= # fff返回true }；//拖拽的元素在目标元素上同时鼠标放开斌。ondrop=function(e){ if(drag){ drag。父节点。移除子对象(拖动)；this.appendChild(拖动);}这个。风格。背景色= # fff返回false }；}文档。身体。ondrop=function(e){ e . prevent default()；e。停止传播();}/脚本/正文/html以上就是HTML5中的拖放相关资料介绍，需要的朋友可以参考一下。

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