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拖拽一
