H5中拖拽属性：

draggable： auto | true | false

拖动事件：

- dragstart 在元素开始被拖动时触发

- dragend 在拖动操作完成时触发

- drag 在元素被拖动时触发

释放区事件：

dragenter 被拖动元素进入到释放区所占据得屏幕空间时触发

dragover 当被拖动元素在释放区内移动时触发

dragleave 当被拖动元素没有放下就离开释放区时触发

drop 当被拖动元素在释放区里放下时触发

案例： 实现div拖拽到指定区域效果：

效果：

初始效果：

拖拽过程中的效果：

拖拽到释放去 释放后的效果：

下面是这个操作的代码

var box = document.getElementByclassName('box')[0];

var drop = document.getElementsByClassName('drop')[0];

box.ondragstart = function (e) {

console.log('dragstart');

e.dataTransfer.setData('id',e.target.id);

}

box.ondrag = function (e) {

console.log('drag',e.target.id);

}

box.ondragend = function (e) {

console.log('dragend')

}

drop.ondragenter = function (e) {

console.log('dragenter');

e.preventDefault();

}

drop.ondragover = function (e) {

console.log('dragover');

e.preventDefault();

drop.innerHTML = '';

}

drop.ondragleave = function (e) {

console.log('dragleave');

e.preventDefault();

}

drop.ondrop = function (e) {

console.log('drop');

var imgId = e.dataTransfer.getData('id');

var img = document.getElementById(imgId).cloneNode(true);

drop.appendChild(img);

}

.demo * {

float: left;

width: 100px;

height: 100px;

border: 1px solid #000;

}

img {

width: 100px;

height: 100px;

display: inline-block;

}

.drop {

width: 100px;

height: 100px;

border: 1px solid #000;

}

HTML5原生拖拽/拖放⎡Drag & Drop⎦详解

前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

HTML5原生拖拽/拖放(drag & drop)详解

前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

HTML5拖拽功能drag

1.创建拖拽对象 给需要拖拽的元素设置draggable属性,它有三个值: true:元素可以被拖拽:false:元素不能被拖拽:auto: 浏览器自己判断元素是否能被拖拽. 2.处理拖拽事件当我们拖 ...

每天一个JavaScript实例-html5拖拽

HTML5拖拽功能中 dataTransfer对象详解

有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

html5拖拽总结

拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...

Html5拖拽复制

拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

html5拖拽

html5拖拽一