【02】一个实现h5的拖放的整个过程-魔芋
【02】拖放的整个过程-魔芋
01，创建2个元素，一个为拖放元素dragEle，一个是存放的元素targetEle。添加一些样式。
<div class="dragEle">
我是可拖放的魔芋
</div>
<div class="targetEle">
put place
</div>
02，设置dragEle的属性draggable 属性为 true。使它可以拖动。
03，设置dragEle的dragstart事件。
<div class="dragEle" id="dragEle" draggable="true" ondragstart="dragstart(ev)">
我是可拖放的魔芋
</div>
<div class="targetEle" id="targetEle">
put place
</div>
<script>
function dragstart(ev){
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
</script>
PS：此时，dragEle可以拖动了。如下图：
04，设置目标元素可以接收拖动元素。
dragover 事件
如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
function dragOver(ev) {
ev.preventDefault();
}
05，目标元素的drop事件，添加拖放元素到目标元素。
function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.preventDefault();
ev.stopPropagation();
}
完整代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>moyu's demo</title>
<!-- 定义网页搜索引擎索引方式 -->
<meta name="renderer" content="webkit">
<!-- 360,以webkit内核进行渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- 以最新内核进行渲染。 -->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<!-- 百度禁止转码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.dragEle {
width: 100px;
height: 100px;
background: red;
}
.targetEle {
width: 300px;
height: 300px;
background: yellow;
}
</style>
</head>
<body>
<div class="dragEle" id="dragEle" draggable="true" ondragstart="dragstart(event)">
我是可拖放的魔芋
</div>
<div class="targetEle" id="targetEle" ondrop="dragDrop(event)" ondragover="dragOver(event)">
put place
</div>
<script>
function dragstart(ev) {
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData("Text", ev.target.id);
var src = ev.dataTransfer.getData("Text");
}
function dragEnter(ev) {
}
function dragOver(ev) {
ev.preventDefault();//或 return false;
}
function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.preventDefault();
ev.stopPropagation();
}
</script>
</body>
</html>
**
