Update games based on HTML5 drag (drop)

Encoding environment: Asp.net mvc3 HTML5

Running Environment: the Firefox browser passes.

I. For the HTML5 drag-and-drop function, refer to the introduction on the Internet. I will summarize my learned knowledge points as follows:

1: Global Property draggable

Draggable, a global attribute with the drag and drop function, is true: Can be dragged; false: can not be dragged; Auto: Depends on the browser support; draggable: this value is also scalable.

2: Events

The drag-and-drop operation targets two objects: the source object and the target object. The source object to be dragged is placed at the destination of the object to be dragged. The events involved include:

Source instance:

Dragstart: triggered when the dragged element starts to be dragged.

Dragend: triggered after the dragged element is dragged. This event is triggered after the drop action.

Target entity:

Dragenter: Drag ElementJust enteredTriggered in the target region only once.

Dragover: drag the element inMove the target areaYes. Any movement is triggered.

Dragleave: drag the element inLeaveTriggered in the target region.

Ondrop: Drag ElementPlaced in target area.

The entire process of completing a drag event is:Dragstart --> dragenter --> dragover --> drop --> dragend.

About datatransfer objects:
This object is used to support data storage during drag and drop operations. For more information about the attributes and methods, see here.

Ii. Code section.

HTML code:

@ {Layout = NULL ;}<! Doctype HTML> 
JS Code:
VaR dragsrc; $ (function () {$ (". containerpic. PIC "). each (function () {This. ondragstart = function (EV) {$ (this ). addclass ("pic_select"); eV. datatransfer. export tallowed = "move"; eV. datatransfer. setdata ("text", ev.tar get. innerhtml); ev.datatransfer.setdragimage(ev.tar get, 0, 0); dragsrc = This ;}; this. ondragend = function (EV) {$ (this ). removeclass ("pic_select") ;};}) ;}); function dragstartimg (OBJ, Ev) {$ (OBJ ). addclass ("pic_select"); eV. datatransfer. export tallowed = "move"; eV. datatransfer. setdata ("text", ev.tar get. innerhtml); ev.datatransfer.setdragimage(ev.tar get, 0, 0); dragsrc = OBJ; obj. ondragend = function (EV) {$ (OBJ ). removeclass ("pic_select") ;};} function groupenter (OBJ, event) {$ (OBJ ). addclass ("pic_over");} function grouppicover (OBJ, event) {event. preventdefault (); // block default events} function groupdrop (OBJ, event) {If (dragsrc) {event. preventdefault (); // block the default event var x = document.doc umentelement. scrollleft + event. pagex; var y = document.doc umentelement. scrolltop + event. pagey; var imgwidth = $ (dragsrc ). ATTR ("offsetwidth"); var imgheight = $ (dragsrc ). ATTR ("offsetheight"); If (dragsrc. nodename. tostring () = "Div") {$ (OBJ ). append ("<Div class = \" divpic1 \ "draggable = true ondragstart = \" dragstartimg (this, event) \ "; contenteditable = true style = \" position: fixed; left: "+ x +" PX; top: "+ Y +" PX; \ "> </div>");} else {$ (OBJ ). append ("
CSS code:
.containerpic{width: 400px;float: left;min-height: 800px;padding: 20px;border: 2px solid #f4f4f4;}.pic{max-width: 50px;}.divpic1{background: url("/Content/group/pic2.png") no-repeat 0 0;width: 114px;max-width: 114px;font-size: 12px;color:Maroon;height: 75px;padding: 10px;float: left;}.divpic2{background: url("/Content/group/pic3.png") no-repeat 0 0;width: 96px;font-size: 12px;max-width: 96px;height: 61px;color:Maroon;padding: 10px;float: left;}.pic_select{border: 1px dashed Silver;background-color: #c3f1f7;}.grouppic{border: 3px dashed Silver;width: 800px;height: 800px;position: fixed;top: 50px;left: 500px;}.pic_over{border: 3px dashed Maroon;}
Effect:

 
Drag the background:

 
Effect of replacement:

 
This is basically done, and it feels fun. O (distinct _ distinct) O ~