快捷導(dǎo)航

JavaScript實(shí)現(xiàn)簡單的拖動(dòng)效果

更新時(shí)間：2016年07月02日 10:36:34 作者：光明大神棍

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的拖動(dòng)效果，具有一定的參考價(jià)值，感興趣的朋友可以參考一下

拖動(dòng)是一件非?？岬氖虑?。你點(diǎn)擊某個(gè)對(duì)象，并按住鼠標(biāo)不放，將鼠標(biāo)移動(dòng)到另一個(gè)區(qū)域，然后釋放鼠標(biāo)按鈕將對(duì)象放在這里。
下面是一個(gè)簡單的案例：
HTML部分：注意，拖動(dòng)元素一定要為絕對(duì)定義，即position = absolute;

復(fù)制代碼代碼如下:

<div style="position:absolute;height:100px;width:100px;background:red" class="draggable"></div>

<script src="dome.js"></script>

JS部分（dome.js）：

var EventUtil = {
  // 獲取事件和目標(biāo)
  getEvent : function (event) {
    return event ? event : window.event;
  },
  getTarget : function (event) {
    return event.target || event.srcElement;
  },
  // 添加監(jiān)聽事件
  addEvent : function (element, type, handler) {
    if (element.addEventListener)
    {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent)
    {
      element.attachEvent("on" + type, handler);
    }
  },
  // 注銷監(jiān)聽事件
  delEvent : function (element, type, handler) {
    if (element.removeEventListener)
    {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent)
    {
      element.detachEvent("on" + type, handler);
    }
  }
}
var DragDrop = function () {
  // 判斷DOM元素是否正在被拖動(dòng)的標(biāo)志
  var dragging = null;
  // DOM元素左上角與鼠標(biāo)指針的差值
    diffX = 0;
    diffY = 0;
  function handleEvent(event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    switch (event.type) {
      case "mousedown" : 
      // 判斷DOM元素的class中是否含有draggable屬性
        if (target.className.indexOf("draggable") > -1) {
          dragging = target;
          diffX = event.clientX - target.offsetLeft;
          diffY = event.clientY - target.offsetTop;
        }
      break;

      case "mousemove" : 
        if (dragging != null) {
          target.style.left = event.clientX - diffX + "px";
          target.style.top = event.clientY - diffY + "px";
        }
      break;

      case "mouseup" :
        dragging = null;
      break;

    }
  }
  return {
    enable : function () {
      EventUtil.addEvent(document, "mousedown", handleEvent);
      EventUtil.addEvent(document, "mousemove", handleEvent);
      EventUtil.addEvent(document, "mouseup", handleEvent);
    },
    disable : function () {
      EventUtil.delEvent(document, "mousedown", handleEvent);
      EventUtil.delEvent(document, "mousemove", handleEvent);
      EventUtil.delEvent(document, "mouseup", handleEvent);
    }
  }
}();
DragDrop.enable();

這里需要講解的是diffX和diffY，它們表示元素左上角與鼠標(biāo)指針的差值。
diffX = 鼠標(biāo)的x坐標(biāo) - 元素對(duì)象的offsetLeft
diffY = 鼠標(biāo)的y坐標(biāo) - 元素對(duì)象的offsetTop

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: