HTML5 拖放（Drag 和 Drop）功能开发——基础实战 - ijjyo - 博客园
随笔 - 2, 文章 - 1, 评论 - 0, 引用 - 0
随着HTML5的普及度越来越高，现在写代码也遇到一些了，经过同事的点播开展了一次Dojo活动用以技术交流，我也乘此机会将HTML5的拖放功能整理了一下。
拖拽(Drag/Drop)是个非常普遍的功能。在生活中，拖放物品其实是相当常见的一个动作。标榜&互联网生活尖凿狮&的程序猿也在一直试图用鼠标模拟出&手&的操作，用来给用户以更好的体验，你可以抓住一个对象，并且拖动到你想放置的区域。很多javascript都类似实现了相关的功能，例如，jQueryUI的draganddrop组件，比如《》。。在HTML5中，拖拽(draganddrop)成为了标准操作，任何元素都支持。
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
浏览器支持
虽然是HTML5的东西，但是，根据中显示的浏览器支持情况来看，IE6~IE8都是有drag & drop API的（见下截图）。
Internet Explorer 6~9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释：在 Safari 5.1.2 中不支持拖放。
根据自己的简单的测试，低版本的IE浏览器确实支持诸如ondragstart事件，但是会报不认识dataTransfer的错误。可见IE在细节的处理上与现代浏览器有些不同。
HTML5 拖放实例
下面的例子是一个简单的拖放实例：
&script type="text/javascript"&
function allowDrop(ev)
ev.preventDefault();
function drag(ev)
ev.dataTransfer.setData("Text",ev.target.id);
function drop(ev)
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
&div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"&&/div&
&img id="drag1" src="/img/baidu_jgylogo3.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" /&
它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
&img draggable="true" /&
拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
ev.dataTransfer.setData("Text",ev.target.id);
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的&event.preventDefault() 方法：
event.preventDefault()
进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
代码解释：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中
拖放(Drag 和 Drop)各属性生命周期
刚才大家已经看到了一些新鲜属性名词，如&ondragstart。或许还是很陌生，不知其所以，下面看一张表格或许能豁然开朗：
拖动生命周期
ondragstart
在拖动操作开始时执行脚本（对象是被拖拽元素）
拖动过程中
只要脚本在被拖动就允许脚本（对象是被拖拽元素）
拖动过程中
ondragenter
当元素被拖动到一个合法的放置目标时，执行脚本（对象是目标元素）
拖动过程中
ondragover
只要元素正在合法的放置目标上拖动时，就执行脚本（对象是目标元素）
拖动过程中
ondragleave
当元素离开合法的放置目标时（对象是目标元素）
将被拖拽元素放在目标元素内时运行脚本（对象是目标元素）
在拖动操作结束时运行脚本（对象是被拖拽元素）
写在哪呢？
其实参照上表&描述&中括号内的提示即可知道，不过为了能更直观的了解到，特呈上代码：
被拖放元素
&span draggable="true" id="Span1" ondragstart="fooDragStart(this, event)" ondrag="fooDrag(this, event)" ondragend="fooDragEnd(this, event)"&
&img src="../images/yjj_1.png"&&/span&
id="div1" ondrop="fooDrop(this, event)"
ondragenter="fooDragEnter(this, event)" ondragleave="fooDragLeave(this, event)"
ondragover="fooDragOver(this,event)"&
下面，我将展示将一张图片放入div中的整个script执行过程：
执行元素介绍
　　1.&成功将图片拖入div中
onDragStart，当元素被拖动到一个合法的放置目标时，执行脚本（对象是目标元素）
onDrag，只要脚本在被拖动就允许脚本
onDrag，只要脚本在被拖动就允许脚本
onDragEnter，在拖动操作开始时执行脚本
onDragOver，只要元素正在合法的放置目标上拖动时，就执行脚本（对象是目标元素）
onDrag，只要脚本在被拖动就允许脚本
onDragOver，只要元素正在合法的放置目标上拖动时，就执行脚本（对象是目标元素）
onDrop，在拖动操作结束时运行脚本
onDragEnd，在拖动操作结束时运行脚本
　　2.&已拖放，可最终未放入div中
onDragStart，当元素被拖动到一个合法的放置目标时，执行脚本（对象是目标元素）
onDrag，只要脚本在被拖动就允许脚本
onDrag，只要脚本在被拖动就允许脚本
onDragEnter，在拖动操作开始时执行脚本
onDragOver，只要元素正在合法的放置目标上拖动时，就执行脚本（对象是目标元素）
onDrag，只要脚本在被拖动就允许脚本
onDragOver，只要元素正在合法的放置目标上拖动时，就执行脚本（对象是目标元素）
onDrag，只要脚本在被拖动就允许脚本
onDragLeave，当元素离开合法的放置目标时（对象是目标元素）
onDrag，只要脚本在被拖动就允许脚本
onDrag，只要脚本在被拖动就允许脚本
onDragEnd，在拖动操作结束时运行脚本
由上两个执行顺序的Log能看出：
只有将&被拖拽元素&放入&目标元素&才会执行&onDrop&属性的方法；
&onDrag&的事件只要鼠标按住并且拖动就会持续不断的执行；
&onDragOver&的事件是只要鼠标按住、拖动&被拖拽元素&在&目标元素&上滑过就会持续不断的执行；
&onDragEnd&的事件无论如何，只要按住的鼠标放开了，就会执行
能读到这里说明你是比较勤劳的了，看我唠唠叨叨。
在第一步我也只是介绍了HTML5 拖放（Drag 和 Drop）的基本功能，一些深入的比如&文件的拖放&、&从浏览器拖放到桌面&以及&从桌面拖放到浏览器&会在今后的文章中一一讲解。
感谢阅读。文中要是有表述不准确的地方，欢迎指正。问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
Html5的拖放一在拖拽的过程中，一般都是被拖拽元素长什么样子，拖拽中跟随鼠标的那个效果就是被拖拽元素的样子，这个能改吗，这个跟谁效果能自定义吗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
终于找到了方法, 在event对象中有dataTransfer.setDragImage([element]image，x[number], y[number])这个方法， 参数element必须是在document中的element, x,y是相对鼠标的便宜位置。在 dragstart的时候使用此方法。
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：今天我们来介绍一下h5的拖放事件：
H5的拖放事件提供了多个接口：
1、drag：当元素或者选中的文本被拖动时触发（每几百毫秒触发一次），应用在被拖拽元素上
2、dragend：当拖动操作结束时触发（通过释放鼠标按钮或者点击转义键），应用在被拖拽元素上
3、dragenter：当一个被拖动的元素或者选中的文本进入一个有效的放置目标时触发，应用在目标元素上
4、dragexit：当元素不再是拖动操作的直接选择元素时触发（很少使用）
5、dragleave：当拖动元素或者选中的文本离开有效的放置区域时触发，应用在目标元素上
6、dragover：当元素或者选中的文本被拖动到有效放置区域上方时触发（每几百毫秒触发一次），应用在目标元素上
7、dragstart：当用户开始拖动元素或者拖动选中文本时触发，应用在被拖拽元素上
8、drop：当元素或选中的文本在有效区域放置时触发，应用在目标元素上。
event.dataTransfer
在进行拖放操作时，DataTransfer 对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型
这个对象在所有的拖动事件属性dataTransfer 都是可用的，但是不能单独创建。
dataTransfer方法（比较多，简单罗列几个）
将指定格式的数据赋值给dataTransfer对象，参数format定义数据的格式也就是数据的类型，data为待赋值的数据，有点像jquery里面的data
如果指定的数据类型不存在，它将添加到的末尾，这样类型列表中的最后一个项目将是新的格式。如果已经存在的数据类型，替换相同的位置的现有数据。就是，当更换相同类型的数据时，不会更改类型列表的顺序。
getData(format)
从dataTransfer对象中获取指定格式的数据，format代表数据格式，如果给定类型的数据不存在或者数据转存（data transfer）没有包涵数据，方法将返回一个空字符串。
这个数据将仅仅在放置动作发生时在drop时间中是可用的。
下面是个实例，拖拽元素进行删除：
padding:0;
list-style:
background-color:#4590
margin:20px 40px 20px 100
height:150
font-size:40
line-height:150
text-align:
background-color:#b3c6e8;
margin-left:50
margin-top:50
html代码：
&li draggable="true" ondragstart="drag(event)" id="li1" ondragend="dend(event)"&1&/li&
&li draggable="true" ondragstart="drag(event)" id="li2" ondragend="dend(event)"&2&/li&
&li draggable="true" ondragstart="drag(event)" id="li3" ondragend="dend(event)"&3&/li&
&li draggable="true" ondragstart="drag(event)" id="li4" ondragend="dend(event)"&4&/li&
&li draggable="true" ondragstart="drag(event)" id="li5" ondragend="dend(event)"&5&/li&
&li draggable="true" ondragstart="drag(event)" id="li6" ondragend="dend(event)"&6&/li&
&div id="div" ondragenter="enter(event)" ondragover="over(event)" ondragleave="leave(event)" ondrop="drop(event)"&垃圾箱&/div&
function drag(event) {
event.target.style.background = "red";
event.dataTransfer.setData("name",event.target.id)
function dend(event) {
event.target.style.background = "#4590bb";
//拖拽进入标签范围
function enter(event) {
document.getElementById("div").innerHTML = "释放删除";
function leave(event) {
document.getElementById("div").innerHTML = "垃圾箱";
function drop(event) {
//阻止浏览器默认事件
event.preventDefault();
document.getElementById("div").innerHTML = "正在删除";
var id = event.dataTransfer.getData("name");
var ul = document.getElementsByTagName("ul")[0];
ul.removeChild(document.getElementById(id));
function over(event) {
event.preventDefault();
阅读(...) 评论()H5的拖放事件提供了多个接口：
1、drag：当元素或者选中的文本被拖动时触发（每几百毫秒触发一次），应用在被拖拽元素上
2、dragend：当拖动操作结束时触发（通过释放鼠标按钮或者点击转义键），应用在被拖拽元素上
3、dragenter：当一个被拖动的元素或者选中的文本进入一个有效的放置目标时触发，应用在目标元素上
4、dragexit：当元素不再是拖动操作的直接选择元素时触发（很少使用）
5、dragleave：当拖动元素或者选中的文本离开有效的放置区域时触发，应用在目标元素上
6、dragover：当元素或者选中的文本被拖动到有效放置区域上方时触发（每几百毫秒触发一次），应用在目标元素上
7、dragstart：当用户开始拖动元素或者拖动选中文本时触发，应用在被拖拽元素上
8、drop：当元素或选中的文本在有效区域放置时触发，应用在目标元素上
class=&dropzone&&
id=&draggable& draggable=&true& ondragstart=&event.dataTransfer.setData('text/plain',null)&&
&&&&This div is draggable
class=&dropzone&&&/div&
class=&dropzone&&&/div&
class=&dropzone&&&/div&
document.addEventListener(&drag&,
function( event ) {
}, false);
document.addEventListener(&dragstart&,
function( event ) {
&&dragged = event.
&&event.target.style.opacity = .5;
document.addEventListener(&dragend&,
function( event ) {
&&event.target.style.opacity =
document.addEventListener(&dragover&,
function( event ) {
&&event.preventDefault();
document.addEventListener(&dragenter&,
function( event ) {
( event.target.className == &dropzone&
&&&&&&event.target.style.background =
document.addEventListener(&dragleave&,
function( event ) {
( event.target.className == &dropzone&
&&&&&&event.target.style.background =
document.addEventListener(&drop&,
function( event ) {
&&event.preventDefault();
( event.target.className == &dropzone&
&&&&&&event.target.style.background =
&&&&&&dragged.parentNode.removeChild( dragged );
&&&&&&event.target.appendChild( dragged );
event.dataTransfer
在进行拖放操作时，DataTransfer 对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型
这个对象在所有的拖动事件属性dataTransfer 都是可用的，但是不能单独创建。
dataTransfer属性（比较多，简单罗列几个）
dropEffect：
设置实际的放置效果，它应该始终设置成 effectAllowed 的可能值之一
可能的值:
copy: 复制到新的位置
move: 移动到新的位置.
link: 建立一个源位置到新位置的链接.
none: 禁止放置（禁止任何操作）.
设置其他值会导致拖放失败
effectAllowed：
用来指定拖动时被允许的效果
可能的值:
copy: 复制到新的位置.
move:移动到新的位置 .
link:建立一个源位置到新位置的链接.
copyLink: 允许复制或者链接.
copyMove: 允许复制或者移动.
linkMove: 允许链接或者移动.
all: 允许所有的操作.
none: 禁止所有操作.
uninitialized: 缺省值（默认值）, 相当于 all.
设置其他值会导致拖放失败
拖拽的数据集合
该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型，返回值是一个数组
dataTransfer方法（比较多，简单罗列几个）
将指定格式的数据赋值给dataTransfer对象，参数format定义数据的格式也就是数据的类型，data为待赋值的数据，有点像jquery里面的data
如果指定的数据类型不存在，它将添加到的末尾，这样类型列表中的最后一个项目将是新的格式。如果已经存在的数据类型，替换相同的位置的现有数据。就是，当更换相同类型的数据时，不会更改类型列表的顺序。
getData(format)
从dataTransfer对象中获取指定格式的数据，format代表数据格式，如果给定类型的数据不存在或者数据转存（data transfer）没有包涵数据，方法将返回一个空字符串。
这个数据将仅仅在放置动作发生时在drop时间中是可用的
clearData([format])
从dataTransfer对象中删除指定格式的数据，参数可选，若不给出，则为删除对象中所有的数据。
addElement(element)
设置拖动源。通常不需要改变这项，如果修改将会影响拖动的那个节点和dragend事件的触发。默认目标是被拖动的节点。
setDragImage(image,x,y)
设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。
大多数情况下，这项不用设置，因为被拖动的节点被创建成默认图片。
要用作拖动反馈图像元素
图像内的水平偏移量.
图像内的垂直偏移量.
&&&&display:inline-block;
&&&&padding:
&&&&background-color:
&&&&margin:
style=&width:600border:1&&
&&&&&h2&可将喜欢的项目拖到收藏夹&/h2&
draggable=&true& ondragstart=&dsHandler(event);&&勿忘心安&/div&
draggable=&true& ondragstart=&dsHandler(event);&&照顾自己&/div&
draggable=&true& ondragstart=&dsHandler(event);&&Number 9&/div&
draggable=&true& ondragstart=&dsHandler(event);&&崇拜&/div&
id=&dest& style=&width:400height:400border:1float:&&
ondragleave=&&&收藏夹&/h2&
id=&gb& draggable=&false& style=&width:100height:100border:1float:&&我是垃圾桶&/div&
dest = document.getElementById(&dest&);
dsHandler = function
&&&&evt.dataTransfer.setData(&text/plain&,&&item&&+evt.target.innerHTML);
dest.ondrop =
function(evt){
text = evt.dataTransfer.getData(&text/plain&);
&&&&if(text.indexOf(&&item&&) ==
&&&&&&&&var
newEle = document.createElement(&div&);
&&&&&&&&newEle.id =
Date().getUTCMilliseconds();
&&&&&&&&newEle.innerHTML = text.substring(6);
&&&&&&&&newEle.draggable =
&&&&&&&&newEle.ondragstart =
function(evt){
&&&&&&&&&&&&evt.dataTransfer.setData(&text/plain&,&&remove&&+newEle.id);
&&&&&&&&dest.appendChild(newEle);
document.getElementById(&gb&).ondrop =
function(evt){
id = evt.dataTransfer.getData(&text/plain&);
&&&&if(id.indexOf(&&remove&&)
&&&&&&&&var
target = document.getElementById(id.substring(8));
&&&&&&&&dest.removeChild(target);
document.ondragover =
function(evt){
&&&&return
document.ondrop =
function(evt){
&&&&return
本文已收录于以下专栏：
相关文章推荐
1、easyui中的拖放功能
要实现easyUI的datagrid表格的拖拽，需要使用到easyUI的extension扩展。可拖放的数据表格在easyui手册extension中有详细的介绍，关于如...
easyUI拖拽功能讲解以及多选拖拽的实现
有什么不对地方望大家多多指教！
Basic Draggable - jQuery EasyUI Demo
&link rel=&stylesheet& type=&tex...
#box{width: 300height: 200border: 1px solid #000;}
#img{width: 150height: 100}
本来准备写一个支持多图片拖拽上传的例子，但是为了更好的理解，先介绍一下HTML5的拖放。
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
浏览器支持
Internet Explorer...
web qq页面上的元素基本都可以拖拽，实现web app
HTML5拖拽 和 拖拽异步上传文件
一、传统实现拖拽的方式
传统的就是使用js实现元素的拖拽，核心原理如下：
   width:100
   height:100
lang=&en&&
charset=&UTF-8&&
他的最新文章
讲师：王哲涵
讲师：韦玮
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)【本文源址： 转载请添加该地址】
其实HTML5就是新增一些有用的API
让我们更轻松的开发
从而把更多精力都放在业务逻辑上来
这些API的使用也非常简单
不过我的记性不太好
所以还是以博客的形式记录下来（手动滑稽）
今天就来写一下这个拖拽API
说起拖放，其实最早实现拖放功能的还是IE（IE4）
H5就是在IE实例的基础上指定的拖拽规范
在浏览器中，是有默认拖拽的
比如说图片的拖拽
选中文本的拖拽
链接的拖拽
浏览器默认允许我们拖拽图像、文本以及链接
让其它元素被拖动也是可以实现的
只需要在元素标签上添加一个属性
draggable="true"&&
当拖拽这个元素的时候，浏览器就会以半透明复本的方式显示
拖拽事件应该分为两类
一类是被拖拽元素触发的事件
另一类是拖放目标元素触发的事件
id="source" draggable="true"&&
id="target"&&
var source = document.getElementById('source');
var target = document.getElementById('target');
拖拽元素的时候，被拖拽元素会触发以下事件
当鼠标点中元素并且开始移动时，就会触发dragstart事件（类比mousedown）
拖拽过程中会持续不断地触发drag事件（类比mousemove）
松开鼠标取消拖拽时就会触发dragend事件（类比mouseup）
source.ondragstart = function(){
console.log('开始拖拽');
source.ondrag = function(){
console.log('拖拽中');
source.ondragend = function(){
console.log('拖拽结束');
当拖拽的元素拖到一个目标元素上时，目标元素会触发以下事件
拖拽元素到目标上，就会触发dragenter事件（类比mouseover）
当拖动元素在目标元素中，就会持续触发dragover事件
离开目标元素，触发dragleave事件（类比mouseout）
若拖放元素到了目标元素中（在目标元素中松开鼠标），就会触发drop事件而不会触发dragleave事件
target.ondragenter = function(){
console.log('拖动进入目标元素');
target.ondragover = function(){
console.log('目标元素中拖拽');
target.ondragleave = function(){
console.log('拖动离开目标元素');
target.ondrop = function(){
console.log('拖放');
这时我们会发现元素拖放到目标元素中时
并没有触发drop事件
我们看到了一个特殊的光标（圆环+反斜线）
意思就是无效的拖放
所以导致没有触发drop事件
也就是说元素默认是不能够拖放
只要我们在目标元素的dragover事件中取消默认事件就可以解决问题
target.ondragover = function(e){
console.log('目标元素中拖拽');
e.preventDefault();
只是简单的拖放毫无意义
我们需要进行数据交换
而这个用语数据交换的对象就是事件对象的属性dataTransfer
dataTransfer的两个核心方法是setData()和getData()
setData()用于设置数据，getData()用语接收数据
event.dataTransfer.setData('text','some text');
var text = event.dataTransfer.getData('text');
如果我们拖拽了选中文本
那么浏览器默认就会调用dataTransfer.setData，设置对应文本数据
setData()和getData()就是数据类型的字符串
IE定义的数据类型除了“text”文本类型还有“URL”
H5对它进行了扩展，可以指定各种MIME类型
但为了向后兼容，它同样支持“text”和“URL”
它们会被分别映射为“text/plain”和“text/uri-list”
如果数据保存为URL，浏览器会做特殊处理，把它当成网页链接
（所以拖拽链接到另外的浏览器窗口就会打开网页）
必要的话，我们可以手动保存需要传输的数据
var source = document.getElementById('source');
var target = document.getElementById('target');
source.ondragstart = function(e){
e.dataTransfer.setData('text','传递文本数据');
target.ondragover = function(e){
e.preventDefault();
target.ondrop = function(e){
console.log(e.dataTransfer.getData('text'));
在dataTransfer中还有两个重要的属性
dropEffect和effectAllowed
dropEffect
dropEffect属性值为字符串，表示被拖动元素可以执行哪一种放置行为
要使用这个属性，必须在dragenter事件处理函数中设置
none 不能把元素拖放至此（除文本框外全部元素的默认值）
move 移动到目标
copy 复制到目标
link 目标打开拖动元素（拖动元素必须是链接并有URL）
effectAllowed
effectAllowed属性值也是字符串，表示允许拖动元素哪种dropEffect
要使用这个属性，必须在dragst事件处理函数中设置
uninitialized 没有设置任何拖放行为
none 不能由任何行为
copy 仅允许dropEffect值为copy
link 仅允许dropEffect值为link
move 仅允许dropEffect值为move
copyLink 允许dropEffect值为copy和link
copyMove 允许dropEffect值为copy和move
linkMove 允许dropEffect值为link和move
all 允许任意dropEffect
本文已收录于以下专栏：
相关文章推荐
虽然通过dragstart、drag和dragend事件实现了原生拖拽。但是这仅仅是拖拽，在IE6和IE7中还是有些拖拽问题，并且也没有实现数据的交换。为了实现数据的交换，IE5引入了dataTran...
之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了。今天为大家介绍HTML5拖拽中的其他一些小东东，闲话不多说赶快一起看看吧。在默认情况下，链接、文本和图像是可以拖动的，不用再写代码即可...
首先放一个今天学到的小demo：
margin: 0;
一、关于拖拽API
拖拽API是HTML5的新特性，相对于其他新特性来说，重要程度占到6成，实际开发中使用比例占到3成，学习要求个人认为是达到掌握即可的程度。
二、什么是拖拽和释放？
浏览器加载了html和css是怎样呈现在浏览器上面的呢？
这个底层的原理需要我们了解
这样我们才能够进一步做出一些性能优化浏览器渲染大体上分为以下五步
处理html生成 DOM（Document ...
JavaScript数组去重问题是面试（或笔试）中可能被问到的题
如果只能说出一两种方法的话，就显得我们很low
所以这里我总结了数组去重的六种方法供大家参考直接遍历首先先来一种简单粗暴的方法
了解了浏览器渲染原理之后
我们知道了浏览器听过渲染树计算布局后，就开始绘制页面元素
但是渲染树并不是一成不变的，在我们的脚本当中
它是可能改变的重绘与重排当DOM变化影响了元素的几何属性（宽、高...
页面上元素的拖拽效果html5（goole浏览器测试）网页上把一张图片、或一段文字，拖到指定的位置；
创建拖拽对象；
给拖拽的对象设定draggable属性，true，false，auto（浏览器自...
他的最新文章
讲师：王哲涵
讲师：韦玮
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)