H5 的 Draggable 属性
Posted 暗夜独狼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5 的 Draggable 属性相关的知识，希望对你有一定的参考价值。
html5提供专门的拖拽与拖放的API，
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：< li draggable="true"> aaaa</li> 否则不会有效果
二、相关重点
- dataTransfer 对象：拖拽对象用来传递的媒介，使用一般为Event.dataTransfer。 在 event对象下
- draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，
- //drag的顺序：
- ondragstart 事件: 当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
- ondrag 事件: 在dangstart 和 dargend 之间发生的， 此事件作用在被拖曳元素上
- ondragenter 事件: 拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
- ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
- ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
- ondragleave 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 (一般 有了 drop就没有dragleave 事件 )
- ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
- Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
- event.dataTransfer.effectAllowed 属性：就是拖拽的效果，拖拽时光标的样式。
- evnet.dataTransfer.setDragImage(odiv,0,0); 拖拽时的影像 是 odiv ，鼠标指在odiv的 0，0处（左上角）
解决Firefox 浏览器下的问题：
必须设置 dataTransfer 对象的setData方法 才能拖拽图片以外的其他标签
dataTransfer.setData() 方法 设置被拖数据的数据和值（key和 value）必须 是字符串， dataTransfer.getData() 方法 根据 key 获取value的 值
下面是一个简单的例子：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
li{
height: 20px;
width: 100px;
background: #e3f;
margin: 20px;
list-style: none;
}
div{
margin-top: 200px;
width: 100px;
height: 100px;
background: red;
}
</style>
<title>ni</title>
<script type="text/javascript">
window.onload = function(){
var j = 0;
var ul = document.getElementsByTagName("ul")[0];
var lis = document.getElementsByTagName("li");
var put = document.getElementById("put");
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].ondragstart = function(ev){
var ev = ev||window.evnet;
ev.dataTransfer.setData("index",this.index);
this.style.backgroundColor = "#9f9";
}
lis[i].ondrag = function(){
this.style.backgroundColor = "#ff9";
}
lis[i].ondragend = function(){
this.style.backgroundColor = "#931";
}
};
put.ondragenter = function(){
this.style.backgroundColor = "black";
}
put.ondragover = function(ev){
ev.preventDefault();
this.style.backgroundColor = "blue";
}
put.ondragleave = function(){
this.style.backgroundColor = "#931";
}
put.ondrop = function(ev){
var ev = ev || window.evnet;
this.style.backgroundColor = "#999";
ev.target.appendChild(lis[ev.dataTransfer.getData("index")]);
//ul.removeChild(lis[ev.dataTransfer.getData("index")]); 加了这句话反而出问题，appendChild(e) 就是剪切的，当添加了子元素 e 后，会把原来的元素 e 给删除了
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
};
}
}
</script>
</head>
<body>
<ul>
<li draggable="true">aaaaa</li>
<li draggable="true">bbbbb</li>
<li draggable="true">ccccc</li>
</ul>
<div id="put"></div>
</body>
以上是关于H5 的 Draggable 属性的主要内容，如果未能解决你的问题，请参考以下文章