JavaScriptは簡単なドラッグ効果を実現します.

ドラッグはとてもクールなことです.オブジェクトをクリックして、マウスを押して放しないで、マウスを他の領域に移動して、マウスボタンを放してオブジェクトをここに置いてください.以下は簡単なケースです.HTML部分:ドラッグ要素は絶対的に定義されています.すなわち、position=absoluteです.

JS (dome.js):

var EventUtil = {
  //        
  getEvent : function (event) {
    return event ? event : window.event;
  },
  getTarget : function (event) {
    return event.target || event.srcElement;
  },
  //       
  addEvent : function (element, type, handler) {
    if (element.addEventListener)
    {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent)
    {
      element.attachEvent("on" + type, handler);
    }
  },
  //       
  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            
  var dragging = null;
  // DOM             
    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です. の とマウスポインタの を しています.diffX=マウスのx - オブジェクトのoffset diffy=マウスのy - オブジェクトのoffset Top
が の です. さんの に に ちたいです.