__DRAG

__drag is a javascript script suite for tracking mouse/touch events involved with drag/drop/swipe elements. In this package, there are other two methods that actually perform drag and drop actions on DOM elements This is designed to work both desktop and mobile

Usage

__drag is the main method. It simply notify when mouse or touch events are fired ( eventListener are initialized on page load ). Because it does not make any changes in the user interface, it is an ideal basis for creating more complex actions such as drag-and-drop,swipe,etc..

var defaultsOptions = {
    onlyHandler : true, // if true, element children will not trigger the drag event
    grabCursors : true, // if true, css classes will be added to document.body in order to change mouse cursor
    drop : true, // only for __dropElement module, set to true will drop the element
    target : null, // only for __dropElement module, set to the DOM target element where to drop
    grabClass : '__drag-cursor-grab', // default css class when grab element
    grabbingClass : '__drag-cursor-grabbing', // default css class when grabbing element
    noDrop : false, // only for __dropElement module ,
    // if set to true will change grabbing with a no-drop mouse cursor when over an element different from the target
    noDropClass : '__drag-cursor-no-drop', // class for no-drop
    styleDrop : '__drag__drop-overlay', // only for __dropElement module ,
     // style to be added to the drop target element when hover
    insertElement : 'beforeend' // only for __dropElement module ,
    // position where to insert html, according to element.insertAdjacentHTML
    // see at https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
};
var handlerEl = document.getElementById("element-to-drag");
var drag = __drag(HandlerEl,defaultsOptions);
drag.on("down", function(ev){
  // action on mousedown/touchstart
  // ev is based upon the real event object:
  /*
  e = real event object
  ev = {
        x : e.pageX,
        y : e.pageY,
        target : e.target,
        ev : e
  };
  while in mobile is slightly different:
  ev = {
      x : e.changedTouches[0].pageX,
      y : e.changedTouches[0].pageY,
      ev : e,
      target : document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY),
  };
  */
})
drag.on("move", function(ev){
  // action on mousemove/touchmove
})
drag.on("up", function(ev){
  // action on mouseup/touchend
})
drag.destroy() // remove listeners

__dragElement module

__dragElement drag a DOM element

    var d = __dragElement(document.getElementsByTagName("main")[0]);
    d.destroy(); // remove drag

__dropElement module

__dropElement drag and drop a DOM element in a predefined target

    var d = __dropElement(document.getElementsByTagName("main")[0],{
        target : document.getElementById("target")
    });
    d.destroy(); // remove drag and drop listeners