Drag and Drop Elements

SelectJs :JavaScript library

Drag’n’Drop algorithmdrag(d,w,string1,string2,string3)(); d (Obligatory):the element dragged. w (Optional):Where to drag the element dragged. string1,string2,string3 (Optional): the type of event ,("e:mousedown","e:mousemove","e:mouseup") is default.

On mousedown: -prepare the element for moving, if needed (maybe create a clone of it, add a class to it or whatever).
Then on mousemove move it by changing left/top with position:absolute or position:relative
On mouseup – perform all actions related to finishing the drag’n’drop.

Note :

drag(select('.dot'))(); //Is Equal drag(select('.dot'),"e:mousedown","e:mousemove","e:mouseup")(); //Or drag(select('.dot'),"e:mousedown|false","e:mousemove|false","e:mouseup|false")();

drag(select('.dot'),select('.whereToDrag'))();

drag(select('.whereToDrag_1 .dot'),select('.whereToDrag_1'))(); drag(select('.whereToDrag_2 .dot'),select('.whereToDrag_2'))();

drag(select('.dot'),"e:click","e:click","e:click")(); //Or drag(select('.dot'),"e:click|false","e:click|false","e:click|false")(); //false :is useCapture (true or false) //Where to drag : body is default.

drag(select('.dot'),select('.whereToDrag'),"e:click","e:click","e:click")(); //Or drag(select('.dot'),select('.whereToDrag'),"e:click|false","e:click|false","e:click|false")(); //false :is useCapture (true or false)

SelectJs :JavaScript library

Get in touch on