想要拖放某个元素,必须设置该元素的 draggable 属性为 true,当该属性为 false 时,将不允许拖放。而 img 元素和 a 元素都默认设置了 draggable 属性为 true,可直接拖放,如果不想拖放这两个元素,把属性设为 false 即可。

拖放事件

拖放事件由不同的元素产生。一个元素被拖放,他可能会经过很多个元素上,最终到达想要放置的元素内。这里,我暂时把被拖放的元素称为源对象,被经过的元素称为过程对象,到达的元素我称为目标对象。不同的对象产生不同的拖放事件。

源对象:

dragstart:源对象开始拖放。
drag:源对象拖放过程中。
dragend:源对象拖放结束。

过程对象:

dragenter:源对象开始进入过程对象范围内。
dragover:源对象在过程对象范围内移动。
dragleave:源对象离开过程对象的范围。

目标对象:

drop:源对象被拖放到目标对象内。
<div id="source" draggable="true">a元素</div>
<div id="process">b元素</div>
<div id="target">c元素</div>
<script>
var source = document.getElementById('source'), // a元素
process = document.getElementById('process'), // b元素
target = document.getElementById('target'); // c元素

source.addEventListener('dragstart',function(ev){ // dragstart事件由a元素产生
console.log('a元素开始被拖动');
},false)
process.addEventListener('dragenter',function(ev){ // dragenter事件由b元素产生
console.log('a元素开始进入b元素');
},false)
process.addEventListener('dragleave',function(ev){ // dragleave事件由b元素产生
console.log('a元素离开b元素');
},false)
target.addEventListener('drop',function(ev){ // drop事件由c元素产生
console.log('a元素拖放到c元素了');
ev.preventDefault();
},false)
document.ondragover = function(e){e.preventDefault();}

</script>

dataTransfer 对象

在所有拖放事件中提供了一个数据传递对象 dataTransfer,用于在源对象和目标对象间传递数据。接下来认识一下这个对象的方法和属性,来了解它是如何传递数据的。

setData()

该方法向 dataTransfer 对象中存入数据。接收两个参数,第一个表示要存入数据种类的字符串,现在支持有以下几种:

text/plain:文本文字。
text/html:HTML文字。
text/xml:XML文字。
text/uri-list:URL列表,每个URL为一行。

第二个参数为要存入的数据。例如:

event.dataTransfer.setData('text/plain','Hello World');

getData()

该方法从 dataTransfer 对象中读取数据。参数为在 setData 中指定的数据种类。例如:

event.dataTransfer.getData('text/plain');

clearData()

该方法清除 dataTransfer 对象中存放的数据。参数可选,为数据种类。若参数为空,则清空所有种类的数据。例如:

event.dataTransfer.clearData();

setDragImage()

HTML5拖放API实现拖放排序的实例代码的更多相关文章

  1. HTML5 进阶系列:拖放 API 实现拖放排序(转载)

    HTML5之拖放API实现拖放排序 前言 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能. 想要拖放某个 ...

  2. HTML5 进阶系列:拖放 API 实现拖放排序

    前言 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能. 想要拖放某个元素,必须设置该元素的 dragga ...

  3. HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)

    1.标签元素更加语义化   2.内容类型仍然为“text/html”    扩展符仍然为html或者htm.    <1>DOCTYPE 声明<!DOCTYPE html>就可 ...

  4. 我拖拖拖--H5拖放API基础篇

    不要搞错,本文不是讲如何拖地的.看过<javascript精粹>朋友应该知道,他实现拖放的过程比较复杂,现在时代不同了,我们用H5的新的拖放API就能非常方便的实现拖放效果了.最近在园子见 ...

  5. HTML5 Drop API

    转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5 ...

  6. html5支持drag的拖放排序插件sortable.js

    html5支持drag的拖放排序插件sortable.js <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.5.1/S ...

  7. html5的新特性——拖放API

    在HTML5之前只能使用鼠标事件模拟出"拖放"效果:HTML5专门为拖放提供了7个事件句柄.  被拖动的源对象可以触发的事件: (1)ondragstart:源对象开始被拖动 (2 ...

  8. HTML5 十大新特性(七)——拖放API

    拖放API是H5专门为了鼠标拖放而新提供了7个事件,可以分成三个部分来讲. 一.拖动的源对象(source)可以触发的事件 dragstart:拖动开始 drag:拖动进行中 dragend:拖动结束 ...

  9. HTML5_06之拖放API、Worker线程、Storage存储

    1.拖放API中源对象与目标对象事件间的数据传递: ①创建全局变量--污染全局对象:  var 全局变量=null;  src.ondragstart=function(){   全局变量=数据值;  ...

随机推荐

  1. leetcode 238 & leetcode 152 & leetcode 228

    lc238 Product of Array Except Self 遍历两次数组 用一个res[] 记录答案 1) 第一次,从左往右遍历 res[i] 记录0~i-1的乘积 2) 第二次,从右往左遍 ...

  2. CF1148F - Foo Fighters

    CF1148F - Foo Fighters 题意:你有n个物品,每个都有val和mask. 你要选择一个数s,如果一个物品的mask & s含有奇数个1,就把val变成-val. 求一个s使 ...

  3. HZOI20190803 A,C题

    题目链接:https://www.cnblogs.com/Juve/articles/11295333.html A: 考场上只有70分... 发现几个性质:特殊性质1:在两条链上,看它是fib第几项 ...

  4. Creating a bootable Ubuntu USB stick

    Windows: https://tutorials.ubuntu.com/tutorial/tutorial-create-a-usb-stick-on-windows#0 Ubuntu: http ...

  5. 出现大量rcuob进程

    方法一: vim /etc/default/grub,在GRUB_CMDLINE_LINUX这一行末尾添加nr_cpus=2,然后执行命令grub2-mkconfig -o /boot/grub2/g ...

  6. js笔试-接收get请求参数

    请编写一个JavaScript函数,它的用途是接收url中get请求的参数,并返回为对象, 如: var url = “https://i.cnblogs.com/EditPosts.aspx?opt ...

  7. Activiti实战02_环境搭建

    1:下载Activiti 访问:https://www.activiti.org/download-bpm 可以下载Activiti相关文档和历史版本压缩包,在 https://www.activit ...

  8. 通过BlukLoad的方式快速导入海量数据

    http://www.cnblogs.com/MOBIN/p/5559575.html 摘要 加载数据到HBase的方式有多种,通过HBase API导入或命令行导入或使用第三方(如sqoop)来导入 ...

  9. pytorch 多GPU处理过程

    多GPU的处理机制: 使用多GPU时,pytorch的处理逻辑是: 1.在各个GPU上初始化模型. 2.前向传播时,把batch分配到各个GPU上进行计算. 3.得到的输出在主GPU上进行汇总,计算l ...

  10. java时间戳和PHP时间戳的转换问题

    由于精度不同,导致长度不一致,直接转换错误.  JAVA时间戳长度是13位,PHP时间戳长度是10位.主要最后三位的不同. 方法,截取前10位,substr($time,0,10);