JS拖拽两种实现方式

拖拽
最近整理了一下以前了解过的一些小demo，就从拖拽说起吧，用原生js实现拖拽效果，大致可分为两种，一是使用鼠标事件，(mousedown、mousemove和mouseup)，二是使用H5拖拽drag与拖放drop属性，下面逐一进行代码演示:

使用鼠标事件实现拖拽效果

html

1
2
3

<div id="container">
    <div id="demo"></div>
</div>

css

*{
       margin: 0;
       padding: 0;
       border: 0;
   }
   #container{
       width: 500px;
       height: 500px;
       border: 1px solid #000;
       position: relative;
   }
   #demo{
       width: 100px;
       height: 100px;
       background-color: #f40;
       position: absolute;
       cursor: pointer;
   }

js

// 初始化
    var dragFun = function(child,parent){
            var drag = document.getElementById(child);
            var dragContainer = document.getElementById(parent) || document;
            // //点击某物体时，用drag对象即可，move和up是全局区域，
            // 也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体会出现拖拽丢失)  
            drag.onmousedown = function(event){
               var event = event || window.event;  //兼容IE浏览器
            //    鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
               var diffX = event.clientX - drag.offsetLeft;
               var diffY = event.clientY - drag.offsetTop;
               if(typeof drag.setCapture !== 'undefined'){
                      drag.setCapture(); //设置元素对鼠标事件的捕获
               }
            document.onmousemove = function(event){
                var event = event || window.event;
                var moveX = event.clientX - diffX;
                var moveY = event.clientY - diffY;
                if(moveX < 0){//超出document区域适配,前提是不传父级元素的id
                    moveX = 0
                }else if(moveX > window.innerWidth - drag.offsetWidth){
                    moveX = window.innerWidth - drag.offsetWidth
                }
                if(moveY < 0){
                    moveY = 0
                }else if(moveY > window.innerHeight - drag.offsetHeight){
                    moveY =  window.innerHeight - drag.offsetHeight
                }

                if(moveX < 0){//超出父级容器适配
                    moveX = 0
                }else if(moveX > dragContainer.offsetWidth - drag.offsetWidth){
                    moveX = dragContainer.offsetWidth - drag.offsetWidth
                }
                if(moveY < 0){
                    moveY = 0
                }else if(moveY > dragContainer.offsetHeight - drag.offsetHeight){
                    moveY =  dragContainer.offsetHeight - drag.offsetHeight
                }
                drag.style.left = moveX + 'px';
                drag.style.top = moveY + 'px'
            }
            document.onmouseup = function(event){
                this.onmousemove = null;
                this.onmouseup = null;
                 //修复低版本ie bug  
                if(typeof drag.releaseCapture!='undefined'){  
                   drag.releaseCapture(); //设置元素对鼠标事件的释放 
                }  
            }
        }
    }
    dragFun('demo','container')

使用H5拖拽属性实现拖拽效果

html

1
2
3

<div class="box1" draggable="true" id="source"></div>
 <br>
<div class="box2" id="target"></div>

css

*{
       margin: 0;
       padding: 0;
       border: 0;
   }
   .box1 {
       width: 100px;
       height: 100px;
       background: salmon
   }
   .box2 {
       width: 300px;
       height: 300px;
       border: 1px solid black
   }

js

window.onload = function () {
       var source = document.getElementById('source');
       var target = document.getElementById('target');
       source.ondragstart = function (event) {
           var e = event || window.event
           console.log('开始拖拽');
           e.dataTransfer.setData('text', e.target.id);
       }
       target.ondragenter = function () {
           console.log('进入目标元素')
       }
       target.ondragover = function (event) {
           var event = event || window.event;
           console.log('在目标元素中拖拽');
           event.preventDefault()
       }
       target.ondragleave = function () {
           console.log('拖放离开目标元素')
       }
       target.ondrop = function (event) {
           console.log('拖放');
           var e = event || window.event
           var data = e.dataTransfer.getData('text');
           e.target.appendChild(document.getElementById(data));

       }
   }