IFE JavaScript Task0002-5 小练习5：界面拖拽交互 html5Drag&Drop的做法。
小练习5：界面拖拽交互
- 实现一个可拖拽交互的界面
- 如示例图，左右两侧各有一个容器，里面的选项可以通过拖拽来左右移动
- 被选择拖拽的容器在拖拽过程后，在原容器中消失，跟随鼠标移动
- 注意拖拽释放后，要添加到准确的位置
- 拖拽到什么位置认为是可以添加到新容器的规则自己定
- 注意交互中良好的用户体验和使用引导；
![]()
1、本来的话，尝试用网上写的JS拖拽效果（也就是设置相对定位与绝对定位，浏览器根据鼠标的位置判断，让选中的元素一同跟随移动；
但后来发现了自己写出这个demo话，bug太多。。。修复下再说吧）。
因此这个练习里用了HTML5的拖拽事件；
基本上原生的拖拽事件的调用还是比较简单方便的，参考了这些，基本的拖拽效果也就做好了
https://www.zybuluo.com/dengzhirong/note/186019；HTML5魔法堂：全面理解Drag & Drop API 详细讲解了Drag&Drop的api；
http://www.cnblogs.com/fsjohnhuang/p/3961066.html HTML5 拖放API
http://www.html5col.com/h5drag_try/ 用于实时测试代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
.box{
margin-top: 20px;
}
.leftbox,.rightbox{
position: relative;
display: inline-block;
margin-left: 180px;
width: 180px;
min-height: 300px;
border: 1px solid #5f5f5f;
z-index: 10;
}
.leftbox span,.rightbox span{
margin: 0 auto;
display: block;
background-color: #1d7ad9;
border-bottom: 1px solid #222222;
height: 50px;
width: 180px;
cursor: move;
}
</style>
</head>
<body>
<div class="box">
<div class="leftbox">
<span></span>
<span></span>
<span></span>
</div>
<div class="rightbox">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
<script>
document.onmousedown=down;
var right=document.querySelector(".rightbox");
var left=document.querySelector(".leftbox");
function down(e){
if(e.target.nodeName.toLowerCase()=="span"){
var e=e||window.event;
e.target.setAttribute("draggable","true");
e.target.className="drup";
var el=document.querySelector(".drup");
//拖放事件触发次序：dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> dragend;
if(el.parentNode.className==="leftbox"){
el.ondragstart=function(e){//拖拽开始事件-当被拖拽元素开始被拖拽时触发
e.dataTransfer.effectAllowed = 'move';//用来指定当元素被拖放时所允许的视觉效果,该属性只有在dragstart下才有用；
e.dataTransfer.setData("text", e.target.innerHTML);//拖拽元素的dragstart初始化相关的数据信息,如果不设置setdate的话，在firefox里拖拽事件是无效的。第一个属性值是说明数据信息的数据类型；第二个属性是具体数据；
e.target.style.opacity="0.5"
};
//drag事件：当被拖拽元素被拖拽时触发
el.ondragend=function(e){//dragend事件:当拖拽行为结束后触发
e.target.style.opacity="1"
};
//dragenter ：当被拖拽元素进入目标元素时触发
right.ondragover=function(e){//dragover事件：当被拖拽元素在目标元素上移动时触发
e.preventDefault();//来阻止浏览器默认的行为；阻止它打开 URL。
e.dropEffect="move"//用来指定当元素被拖放时所允许的视觉效果,该属性只有在dragover下才有用；
};
right.ondrop=function(e){//drop事件：当被拖拽元素在目标元素上，而且释放鼠标左键时触发
var span=document.createElement("span");
span.innerHTML=e.dataTransfer.getData("text");//接受被拖拽的元素的相关数据；
right.appendChild(span);
el.parentNode.removeChild(el);
el.className=""
}
}
else if(el.parentNode.className==="rightbox"){
el.ondragstart=function(e){
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("text", e.target.innerHTML);
e.target.style.opacity="0.5"
};
el.ondragend=function(e){
e.target.style.opacity="1"
}
left.ondragover=function(e){
e.preventDefault();
e.dropEffect="move"
}
left.ondrop=function(e){
var span=document.createElement("span");
span.innerHTML=e.dataTransfer.getData("text");
left.appendChild(span);
el.parentNode.removeChild(el)
el.className=""
}
}
}}
</script>
</html>
浙公网安备 33010602011771号