html5入门教程（七）拖拽操作
2019-11-21 本文已影响0人
党云龙
概念
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释：在 Safari 5.1.2 中不支持拖放。
但是我们通常执行这个操作是在移动端，移动端都是chrome内核的浏览器，所以必定是支持的。
示例
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
#drag1 {width: 40px;height: 40px;background: red;}
</style>
<script type="text/javascript">
//拖动开始 复制拖拽的元素内容
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));
}
function allowDrop(ev){
ev.preventDefault();
}
</script>
</head>
<body>
<p>请拖拽红块到矩形中：</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
<div id="drag1" draggable="true" ondragstart="drag(event)"></div>
<!-- <img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" /> -->
</body>
</html>
代码解释
html5中 当一个元素被设置了属性
draggable="true"
就表示这个元素是可以被拖拽的。
所以把你想要被拖拽的元素加上这个属性是必须的。
接着：这个元素需要一个事件，ondragstart当元素被拖拽的时候会触发。
ondragstart="drag(event)"
让我们连贯的去想这个问题，当我拖拽开始的时候，我需要干什么，我肯定得知道我拖拽得内容，从而在我拖拽结束的时候，把这个内容释放到页面上。
于是乎，这里就又涉及到了一个最关键的方法：
ev.dataTransfer.setData("Text",ev.target.id）
和
ev.dataTransfer.getData("Text");
这两个方法是当拖拽的时候，你可以获取到你拖拽的内容。你也可以想象它就是一个剪切板，当你拖拽开始的时候，执行一下setData把内容存进去，进入释放区域以后，在通过getData给读取出来。
然后，我们就涉及到了最后一个关键点，不是什么地方都可以释放拖拽元素的，一般来说，我们要有一个目标区域，譬如说，拖拽到垃圾箱。
这个垃圾箱上，我们需要添加一个属性，让它可以接收被拖拽的元素：
ondrop="drop(event)"
这个方法里面当然就是使用getData去接收了，这个你看示例已经写明白了。
然后，这里还有一点需要注意，当拖拽结束的时候，我们需要阻止一下默认事件，这里官方的解释是：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
经过我的测试，不加这一条是不能拖拽的，所以必须添加。
然后最后一步，把节点添加进去即可！
ev.target.appendChild(document.getElementById(data));
