安卓与ios手机浏览器支持html5 drag 和drop拖动拖放的小技巧
在HTML5中，新增了一个拖拽(drag 和 drop)，他可以让任何元素都进行拖放，我们先来讲讲pc端如何使用html5的drag与drop进行拖拽吧。
一、html5中的drag与drop拖拽
整个htiml5的拖拽过程可分为一下几步：
1、为了让元素可拖动，我们需要把dom元素的 draggable 属性设置为 true
<div draggable="true" ></div>
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}其中数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
解释一下：dataTransfer对象
事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。有二个方法，
(1) getData() 表示可以取得由setData()保存的值。
(2) setData() 它的第一个参数也是getData()方法的唯一个参数，是一个字符串表示保证的数据类型，"text"或者"URL"。
如果将数据保存为URL浏览器会把它当成网页中的链接，当把它放置到地址栏上会打开该URL。
ondragover 事件规定在何处放置被拖动的数据。
由于默认的是，无法将数据元素放置到其他元素中。如果需要设置允许放置，就必须阻止对元素的默认处理方式。
这就要通过调用 ondragover 事件的 event.preventDefault() 方法：
调用 preventDefault()就是用来避免浏览器对数据的默认处理
event.preventDefault()
4、放下触发ondrop事件
当放置被拖数据时，会发生 drop 事件。
ondrop 属性调用了一个函数，drop(event)：
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}作用在被拖拽的元素上的事件：
ondragstart：表示按下鼠标键并开始移动鼠标的时，进行触发。（对象是被拖拽元素）
ondrag：dragstart事件触发完随即触发drag事件，在元素拖动期间不停的触发该事件，与mousemove事件类似。（对象是被拖拽元素）
ondragend：当拖动停止时，无论是放在有效还是无效目标上会触发dragend事件。（对象是被拖拽元素）
作用在目标元素上的事件：
ondragenter：表示当元素被拖动到放置目标上就会触发，类似于mouseover事件。（对象是目标元素）
ondragover：随即触发dragover事件，且被拖动元素一直在放置目标的范围内移动就一直持续触发。（对象是目标元素）
ondragleave：dragover事件不再发生，他会触发dragleave事件，类似于mouseout事件，如果元素放到了放置目标中，则会触发drap事件而不是dragleave事件。（对象是目标元素）
ondrop：被拖拽的元素在目标元素上鼠标放开时触发事件。（对象是目标元素）。
完整代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<style type="text/css">
#div1,#div2{
width:200px;
height:200px;
padding:10px;
border:1px solid red;
}
#drag1{
width: 100px;
height: 100px;
background: red;
color: white;
}
</style>
<script type="text/javascript">
function allowDrop(ev){
//重写dragover事件的默认行为，将无效放置目标设置为可放置目标
ev.preventDefault();
console.log("正在目标中移动");
}
function drag(ev){
//重写dragover事件的默认行为，将无效放置目标设置为可放置目标
ev.dataTransfer.setData("Text",ev.target.id); // 拖放的数据类型和值
console.log("拖动开始了");
}
function drop(ev){
ev.preventDefault();
//保存在dataTransfer对象中的数据只能在drop事件处理程序中读取
//元素拖到放置目标中会触发drop事件。
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
console.log("拖放成功了");
}
function enter(){
console.log("进入目标区了");
}
function leave(){
console.log("离开目标区了");
}
function end(){
console.log("拖放停止了");
}
// function drags(){
// console.log("正在拖放移动中");
// }
</script>
</head>
<body>
<p>请把图片拖放到矩形中：</p>
<!--
ondrop :当放置被拖数据时，会发生 drop 事件。
ondragover :事件规定在何处放置被拖动的数据。
ondragenter :表示当元素被拖动到放置目标上就会触发，类似于mouseover事件
-->
<div id="div1"BfwOndrop="drop(event)"BfwOndragover="allowDrop(event)"BfwOndragenter="enter(event)"BfwOndragleave="leave(event)">
<p>div1</p>
</div>
<div id="div2"BfwOndrop="drop(event)"BfwOndragenter="enter(event)"BfwOndragover="allowDrop(event)">
<p>div2</p>
</div>
<!--
draggable="true" :设置元素可被拖放
ondragstart :拖动开始时，调用一个函数 "drag(event)"
-->
<div id="drag1" draggable="true"BfwOndragstart="drag(event)"BfwOndragend="end(event)">拖我</div>
<!--ondrag="drags(event)"-->
</body>
</html>好了，上面的代码在各大现代浏览器上运行都很正常，我用andriod和苹果手机运行了一下，竟然没反应，原来是手机端浏览器不支持html5的drag和drop，找了很多资料我发现原来有一个方法让andriod和苹果ios手机浏览器支持html5的drag和drop功能，方法如下：花了很长时间才找到，支付一个金币鼓励一下我吧（1金币=1元）
{{collectdata}}
网友评论0