1.0.14 • Published 5 years ago
@dinuovos/drag v1.0.14
__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