JavaScript achieves simple drag effects

  • 2021-07-01 06:31:33
  • OfStack

Drag is a very cool thing. You click on an object, hold down the mouse, move the mouse to another area, and then release the mouse button to put the object here.
Here is a simple case:
HTML section: Note that drag element 1 must be absolutely defined, that is, position = absolute;

<div style="position:absolute;height:100px;width:100px;background:red" class="draggable"></div>
<script src="dome.js"></script>

JS section (dome. js):


var EventUtil = {
  //  Get events and targets 
  getEvent : function (event) {
    return event ? event : window.event;
  },
  getTarget : function (event) {
    return event.target || event.srcElement;
  },
  //  Add Listening Events 
  addEvent : function (element, type, handler) {
    if (element.addEventListener)
    {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent)
    {
      element.attachEvent("on" + type, handler);
    }
  },
  //  Log off listening events 
  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 () {
  //  Judge DOM Flag of whether the element is being dragged 
  var dragging = null;
  // DOM The difference between the upper left corner of the element and the mouse pointer 
    diffX = 0;
    diffY = 0;
  function handleEvent(event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    switch (event.type) {
      case "mousedown" : 
      //  Judge DOM Element's class Does it contain in draggable Attribute 
        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();

What we need to explain here are diffX and diffY, which represent the difference between the upper left corner of the element and the mouse pointer.
diffX = x coordinates of mouse-offsetLeft of element object
diffY = y coordinates of mouse-offsetTop of element object

The above is the whole content of this paper, hoping to help everyone's study.


Related articles: