JS 實現 DIV 可拖拽

/* 可拖拽 */
 var dragBox = function (drag, wrap) {

      function getCss(ele, prop) {
           return parseInt(window.getComputedStyle(ele)[prop]);
      }

      var initX,
          initY,
          dragable = false,
          wrapLeft = getCss(wrap, "left"),
          wrapRight = getCss(wrap, "top");

      drag.addEventListener("mousedown", function (e) {
      	// console.log(e)
           dragable = true;
           initX = e.clientX;
           initY = e.clientY;
      }, false); 

     document.addEventListener("mousemove", function (e) {
           if (dragable === true ) {
               var nowX = e.clientX,
                   nowY = e.clientY,
                   disX = nowX - initX,
                   disY = nowY - initY;
               wrap.style.left = wrapLeft + disX + "px";
               wrap.style.top = wrapRight + disY + "px";
           }
      });

      drag.addEventListener("mouseup", function (e) {
           dragable = false;
           wrapLeft = getCss(wrap, "left");
           wrapRight = getCss(wrap, "top");
      }, false); 

   };

drag:可拖拽區域對象
wrap:整個 DIV 對象

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章