Native drag and drop

VaR dragdom = Document. queryselector (". fordrop "),
Dropdom = Document. queryselector (". fordrop ");

W. addhandler (dragdom, "dragstart", function (e ){
E. datatransfer. setdata ("text", "Hello Zodiac ");
W. Log ("dragstart ");
});
W. addhandler (dragdom, "drag", function (e ){
W. Log ("drag ");
});
W. addhandler (dragdom, "dragend", function (e ){
W. Log ("dragend ");
});

 

 

W. addhandler (dropdom, "dragenter", function (e ){
W. preventdefault (E );
W. Log ("dragenter ");
});
W. addhandler (dropdom, "dragover", function (e ){
W. preventdefault (E );
W. Log ("dragover ");
});
W. addhandler (dropdom, "Drop", function (e ){
VaR DATA = E. datatransfer. getdata ("text ");
W. preventdefault (E );
W. Log ("Drop ");
});
W. addhandler (dropdom, "dragleave", function (e ){
W. preventdefault (E );
W. Log ("dragleave ");
});

 

 

// Drag and drop of the package

Function eventtarget (){
This. Handlers = {};
}

Eventtarget. Prototype = {
Constructor: eventtarget,
Addhandler: function (type, Handler ){
If (typeof this. Handlers [type] = "undefined "){
This. Handlers [type] = [];
}
This. Handlers [type]. Push (handler );
},

Fire: function (event ){
If (! Event.tar get ){
Event.tar get = this;
}
If (this. Handlers [event. Type] instanceof array ){
VaR handlers = This. Handlers [event. Type];
For (VAR I = 0, Len = handlers. length; I <Len; I ++ ){
Handlers [I] (event );
}
}
},

Removehandler: function (type, Handler ){
If (this. Handlers [type] instanceof array ){
VaR handlers = This. Handlers [type];
For (VAR I = 0, Len = handlers. length; I <Len; I ++ ){
If (handlers [I] = handler ){
Break;
}
}
Handlers. splice (I, 1 );
}
}
};
VaR target = new eventtarget ();

// Add a message event Processor
// Target. addhandler ("message", handlemessage );

// Add a message event Processor
// Target. addhandler ("message", handlemessage1 );

// Trigger all message event Processors
// Target. Fire ({type: "message", message: "Hello World "});

// Trigger a message event Processor
// Target. removehandler ("message", handlemessage );

// Trigger all message event Processors
// Target. Fire ({type: "message", message: "Hello world1 "});

// Endregion

// Region drag and drop
VaR dragdrop = function (){
VaR dragdrop = new eventtarget (),
Dragging = NULL,
Diffx = 0,
Diffy = 0;

Function handleevent (event ){
// Obtain events and objects
Event = W. getevent (event );
VaR target = W. geteventtarget (event );

// Determine the Event Type
Switch (event. Type ){
Case "mousedown ":
If (target. classname. indexof ("draggable")>-1 ){
Dragging = target;
Diffx = event. clientx-target. offsetleft;
Diffy = event. clienty-target. offsettop;
Dragdrop. Fire ({type: "dragstart", target: dragging, X: event. clientx, Y: event. clienty });
}
Break;
Case "mousemove ":
If (dragging! = NULL ){

// Specify the location
Dragging. style. Left = (event. clientx-diffx) + "PX ";
Dragging. style. Top = (event. clienty-diffy) + "PX ";

Dragdrop. Fire ({type: "drag", target: dragging, X: event. clientx, Y: event. clienty });
}
Break;
Case "mouseup ":
Dragdrop. Fire ({type: "dragend", target: dragging, X: event. clientx, Y: event. clienty });
Dragging = NULL;

Break;
Default:
Break;
}
}

// Public interface
Dragdrop. Enable = function (){
W. addhandler (document, "mousedown", handleevent );
W. addhandler (document, "mousemove", handleevent );
W. addhandler (document, "mouseup", handleevent );
};
Dragdrop. Disable = function (){
W. removehandler (document, "mousedown", handleevent );
W. removehandler (document, "mousemove", handleevent );
W. removehandler (document, "mouseup", handleevent );
};
Return dragdrop;
}();

Dragdrop. addhandler ("dragstart", function (e ){
W. Log (E. X );
});
Dragdrop. addhandler ("drag", function (e ){
W. Log (E. X );
});
Dragdrop. addhandler ("dragend", function (e ){
W. Log (E. X );
});
Document. queryselector (". AA"). classlist. Add ("draggable ");
Dragdrop. Enable ();

 

Native drag and drop