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
(1) Implementing drag-and-drop in HTML5 requires setting the "draggable" property of the target element to "true";(2) Related events that are triggered when the element is dropped:a:dragstart--is triggered when a drag-and-drop element is started (Event body:
skillfully integrates the three upload modes, and you can use the IE browser to browse. If HTML5 is not supported, there is no prompt to drag and drop to upload images,The most important part of drag-and-drop upload is the js Code, which implements 70% of the functions. The
Because the title is written into an instance, I will not explain it this time, because this instance is also made up by us. I have referenced about 5 and 6 plug-ins and demos for drag-and-drop upload, then pick out the good place, and finally become such an instance, let's take a look at it together (the address cannot guarantee long-term effectiveness, if the failure please click at the end of the article
Date: 2012-7-26 Source: gbin1.com
Online DemoLocal download
If you mention drag-and-drop plug-ins, you will surely think of jquery UI. This UI class library contains almost all the components you need, but if you only want to use jqueryA component in the UI, for example, if you drag and drop a component, calling such
Simple drag and drop in the HTML5Drag-and-drop is a common feature that grabs an object and then drags it to another location. In HTML5, drag-and-drop is part of the standard, and any element can be dragged and dropped.In order fo
HTML5 's drag and drop is a very good feature, more examples of online use such as Http://html5demos.com/drag, but the majority of these examples are not practical, this article will be a bit of a useful example, through the drag and Dro
property is set to true.
Drag an element using the Ondragstart event. SetData () sets the Get element.
The Datatransfer.setdata () method sets the data type and value to be dragged:function drag (EV) {Ev.dataTransfer.setData ("Text", ev.target.id);}Drag (event) declares a method that specifies the data to be dragged, the type is "text", and t
Comments: Do not use javascript to implement drag-and-drop effects, which has always been what netizens want to see. Second, html5 today provides the following details for you. For more information, see
In Web development, Javascript is needed to implement drag-and-drop effe
How does HTML5 implement drag-and-drop of elements?
I am afraid many front-end users do not know how to implement HTML5 drag-and-drop operations. This article describes how to implement HTML5
HTML5 authoritative guide-new tag changes, file API, drag-and-drop API (brief study note 1 ),1. More semantic tag Elements2.The content type is still "text/html"The extension is still html or htm.3. Omit quotation marksIn HTML5, when the attribute value does not include characters such as null strings,
4. New Global
HTML5-based Drag and Drop generates image Base64 information,
HTML5 Drag and Drop is a very good function, the use of more examples online such as http://html5demos.com/drag, but most o
The new generation of Web development standard HTML 5 can bring far beyond its own ability as a markup language, in addition to our previous introduction of HTML 5 can perfectly support video audio elements, but also provide some powerful scripting tools, responsible for overseeing the HTML5 development process of the Organization, Just published a draft specification for the document Operations API, HTML5
DOCTYPE HTML>HTML> Head> MetaCharSet= "Utf-8"> title>HTML5 Drag and droptitle> Scripttype= "Text/javascript"> functionAllowDrop (EV) {ev.preventdefault ();//Cancel Default } functiondrag (EV) {//set the data type and value of the dragged data //The data type is "Text" and the value is the ID of the draggable element ("Drag1"
Dragging related propertiesThe Draggable property is a global property of HTML5 and is one of the ways that HTML5 supports drag-and-drop operations to indicate whether an element can be dragged and dropped, a draggable with three values, true to drag and
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
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.