HTML5 new drag-and-drop supports only Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.To an example:class="Dragdiv"> I was going to drag class="Dragdiv"> I am a second "Div1"ondrop="Drop (Event)"
Basic situationIn the HTML5 specification, we can set whether this element can be dragged by adding draggable= "true" to the element, where the image and link are turned on by default.Drag and drop elementsThe elements of the draggable= "true" property are set on the pageTarget elementAny element can be a target elementEvent Monitoring // drag element Ondrag //
Document directory
Code explanation:
Reference tutorial address: http://www.w3school.com.cn/html5/html_5_draganddrop.asp
Tutorial:Set the element to drag and drop
First, set the draggable attribute to true to make the element drag:
Drag-ondragstart and setData ()
Th
Put the element picture inside the div box1. First set the element to be drag and drop: Add draggable= "true" to the IMG tag.2. Set the drag of the element: Call a function drag (EV) in the IMG tag with the ondragstart attribute, which sets the data type and value of the dragged data using the Datatransfer.setdata () m
HTML5 + CSS3 implement drag-and-drop upload of images without plug-ins (PreView and batch upload are supported ),
Upload is usually used in projects:
1. form submission
2. flash
3. HTML5
Form submission refreshes the page, making it difficult to perform asynchronous uploads. flash may be used a lot, because it can take
This evening, I spent a few hours preparing an album, similar to uploading files in the QQ space. However, I used ext + HTML5 and other new technologies to upload files with servlet. There are several features:
Drag/Drop File Upload
Get upload progress in real time
Local Preview
Combined with ext
After talking about this, I 'd like to paste a few pic
("") + '/public/uploadfiles/' + filename;
FS creates a file of the specified path and writes the contents of the read file to
fs.createreadstream (req.files["file" +index].path). Pipe (Fs.createwritestream ( TargetPath))
;} Uploadtest.uploadfile=uploadfile;
Exports.uploadtest=uploadtest;
Nodejs is always very simple and powerful, and highly invasive, which is why I like it. We see that the key code here is actually very little, I simply introduced the implementation of the file upload logi
1) Create a source project1.1) The value of the Draggable property:true--This element can be dragged;false--This element cannot be dragged;auto--Browser can decide whether an element can be dragged or not;1.2) The event of the element being dragged:The dragstart--is triggered when the element starts being dragged;drag--is triggered repeatedly while the element is being dragged;dragend--triggered when the drag
1) Create a source project1.1) The value of the Draggable property:true--This element can be dragged;false--This element cannot be dragged;auto--Browser can decide whether an element can be dragged or not;1.2) The event of the element being dragged:The dragstart--is triggered when the element starts being dragged;drag--is triggered repeatedly when an element is dragged.dragend--is triggered when the drag op
Drag and drop:Draggable= on the "true" page to enable drag-and-dropEvent:Ondragstart drag-and-drop start EventOndrag drag and drop inOndragend drag-and-
An interesting drag-and-drop effect recently seen in HTML5, here is a simple drag-and-drop effect on the deleted element.It is a small picture of the above drag and drop in the generous
-draggable Tag file drag and drop99 IE5 Start, 05 after all browser support (except Opera)The interface provided at this timevar dragstart = function(evt) { evt.dataTransfer.setData (' text ', evt.target.id); }; -File drag and drop examplevar drop = function(evt) { var file = evt.datatransfer.files[0]; }; var
Html5 drag and drop
1) create a source project
1.1) value of the draggable attribute:
True -- this element can be dragged;
False -- the element cannot be dragged;
Auto-the browser can decide whether an element can be dragged;
1.2) events of the dragged element:
Dragstart -- triggered when the element is dragged;
Drag-t
Html5 drag and drop
1) create a source project
1.1) value of the draggable attribute:
True -- this element can be dragged;
False -- the element cannot be dragged;
Auto-the browser can decide whether an element can be dragged;
1.2) events of the dragged element:
Dragstart -- triggered when the element is dragged;
Drag-t
Main code parsing
The style part is simple.
Dragover, dragend, and drop are three drag-and-drop events.
Dragover indicates that the drag-and-drop element is moving within the range of the element.
Dragend indicates that the drag-a
Set elements to be dragged and droppedFirst, to make an element draggable, set the Draggable property to True:What to drag-ondragstart and SetData ()The Datatransfer.setdata () method sets the data type and value of the dragged data:function drag (EV) {ev.dataTransfer.setData ("Text", ev.target.id);}In this example, the data type is "Text" and the value is the ID of the draggable element ("Drag1").Where to
DataTransfer object: The medium that the object is used to pass, used generally as event.datatransfer.
Draggable Property: is the label element to set the draggable=true, otherwise there will be no effect, for example:
Ondragstart Event: An event that is triggered when a drag element starts being dragged, and this event acts on the dragged element
OnDragEnter Event: An event that fires when a dragged element enters the target element, which acts
H5 has added an API for drag-and-drop, which allows any element of an HTML page to become draggable by dragging and dropping the API. This is a small example to help understand.HTML> Head> MetaCharSet= "Utf-8"> Metaname= "Author"content= "Dongfeng"> title>HTML5 Drag and droptitle> style>#
Drag and drop and drag a thing to another location. Case 1: OnDrop----------to be placed;OnDragOver------Drag the picture to where;Draggable-------property is set to true, that is, the picture can be dragged;Ondragstart-----Drag the picture;: (in case of browser supp
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.