原生拖拽代码

style:

      *{

            margin:0;

            padding:0;

    }

       #box{

            width:100px;

            height:100px;

            background:red;

            position:absolute;

    }

注:拖拽时元素需要定位   (绝对定位)  


js代码:

      var obox = document.getElementById("box");

      obox.onmousedown = function(ev){

//兼容

       var oEvent = ev || event;

//获取距离事件源的距离

       var left = oEvent.clientX - obox.offsetLeft;

       var top = oEvent.clientY - obox.offsetTop;

      document.onmousemove = function(ev){

//兼容

       var oEvent = ev || event;

      obox.style.left = oEvent.clientX - left + "px";

      obox.style.top = oEvent.clientY - top + "px";

   }

      document.onmouseup = function(){

      document.onmousemove = null;

       document.onmouseup = null;

 }

 }

你可能感兴趣的:(原生拖拽代码)