Update games based on HTML5 drag (drop)

Source: Internet
Author: User

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;}



Drag the background:


Effect of replacement:


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









Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.