做一个简单的拖拽排序吧,参考了网上的各种资料,自己写了一个,加深对拖拽的理解
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>demo4</title>
<style>
.demo {
height: 200px;
width: 200px;
float: left;
border: 1px solid black;
background-color: red;
cursor: move;
margin-left: 10px;
}
.demo >p {
text-align: center;
background-color: green;
margin: 0;
}
.demo.over {
border: 3px dashed #000;
}
</style>
<body>
<div id="demos">
<div draggable="true" class="demo"><p>div1</p></div>
<div draggable="true" class="demo"><p>div2</p></div>
<div draggable="true" class="demo"><p>div3</p></div>
</div>
</body>
<script type="text/javascript">
let demos = document.querySelectorAll('#demos .demo');
var dragEl = null;
Array.prototype.forEach.call(demos, (demo) => {
demo.addEventListener("dragstart",dragstart,false);
demo.addEventListener('dragenter', dragenter, false);
demo.addEventListener('dragover', dragover, false);
demo.addEventListener('dragleave', dragleave, false);
demo.addEventListener('drop', drop, false);
demo.addEventListener('dragend', dragend, false);
});
function dragstart(ev){
ev.target.style.opacity = '0.5';
dragEl = this;
// effectAllowed属性表示允许拖动元素的哪种行为(dropEffect)
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setData("text/html",this.innerHTML);
}
function dragenter(ev){
ev.target.classList.add('over');
}
function dragover(ev){
ev.preventDefault();
// 被拖动的元素移动到放置目标
ev.dataTransfer.dropEffect = 'move';
// return false;
}
function dragleave(ev){
ev.target.classList.remove('over');
}
function drop(ev){
ev.preventDefault();
if (dragEl != this) {
dragEl.innerHTML = this.innerHTML;
this.innerHTML = ev.dataTransfer.getData('text/html');
}
}
function dragend(ev){
[].forEach.call(demos, (demo) => {
demo.classList.remove('over');
demo.style.opacity = '1';
});
}
</script>
</head>
</html>
解释说明一下代码吧,因为要实现拖拽,首先元素必须要加上draggable 为true的属性,html5里面定义了拖拽的几个方法,点击拖拽---》鼠标滑过--》悬停--》离开,已经释放拖拽动作
顺序大体这样:dragstart,dragenter,dragover,dragleave,drop,dragend,这些元素的里面属性,该执行什么做了什么,都在yi有说明,我的代码首先给其dm元素一个个遍历添加监听拖拽事件以及dataTransfer对象的理解
代码解释: document.querySelectorAll 拿到的是一个不是真正的数组,它没有forEach方法,那我们可以从对象的原型(Array.prototype)出发,利用call将demo元素和拖拽事件进行绑定(this指向改变),拖拽开始,为了区别被拖拽元素,给其透明度设置css,滑过目标元素动态添加class,至离开移出class,其实里面的核心点是dragEl , 它决定了排序,全局变量保存拖拽的元素。核心代码
简单放一下效果图:
参考资料:
https://blog.csdn.net/lee_magnum/article/details/17803019
https://my.oschina.net/blogshi/blog/219408
这边稍微提一下,文件的拖拽上传,自己搜了一下,看了看elementUi的拖拽上传的源码。。是直接
ondrop事件来获取文件对象,对里面的各种文件操作时期就不多说,就提一下。有时间可以尝试一下。