html5 拖拽（二）

做一个简单的拖拽排序吧，参考了网上的各种资料，自己写了一个，加深对拖拽的理解

<!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事件来获取文件对象，对里面的各种文件操作时期就不多说，就提一下。有时间可以尝试一下。

html5 拖拽 （二）

猜你喜欢