Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "Javascript API case analysis". The editor shows you the operation process through the actual case. The operation method is simple, fast and practical. I hope this "Javascript API case analysis" article can help you solve the problem.

Drag/Drop is a very common feature that grabs an object and drags it to the area you want to place; in HTML5, draganddrop becomes standard and is supported by any element. Because this feature is so common that all mainstream browsers support this operation, interested friends can understand it, which may be helpful to you.

Drag/Drop is a very common feature. You can grab an object and drag it to the area you want to place. Many javascript similarly implement related functions, such as the draganddrop component of jQueryUI. In HTML5, draganddrop becomes a standard operation, which is supported by any element. Because this feature is so common, all major browsers support this operation.

Enable the drag-draggable property

It's very simple. Just change the drag attribute of an element to draggable, and the element supports dragging, as shown below:

The code is as follows:

Transfer of data in dragging

In the process of dragging, we often need to pass the corresponding logical data to complete the conversion process. Here, we mainly use the dataTransfer object for data transfer. Let's take a look at its members:

Method members:

The code is as follows:

SetData (format,data): assigns the data being dragged to the dataTransfer object.

Format: a string parameter that specifies the type of data being dragged. Values for this parameter can be "Text" (text type) and "URL" (URL type). This parameter is case-independent, so passing in "text" is the same as "Text".

Data: a variant type parameter that specifies the data being dragged. The data can be text, image path, URL, and so on.

This function has a return value of type Boolean. True means that the data was successfully added to dataTransfer, while false means it was unsuccessful. If necessary, you can use this parameter to determine whether some logic should continue.

The code is as follows:

GetData (format): gets the drag data stored in dataTransfer.

The meaning of format is the same as in setData, with values of "Text" (text type) and "URL" (URL type).

The code is as follows:

ClearData (format): removes data of the specified type.

In addition to the "Text" (text type) and "URL" (URL type) that can be specified above, the format here can also take the following values: file- file, html-html element, image- image.

This method can be used to selectively handle the data type of the drag.

Attribute members:

The code is as follows:

EffectAllowed: sets or gets the actions that the data in the data source element can perform.

The attribute type is a string, and the range of values is as follows:

"copy"-copy data.

"link"-Link data.

"move"-Mobile data

"copyLink"-copy or link data, determined by the target object.

"copyMove"-copy or move data, determined by the target object.

"linkMove"-links or moves data, determined by the target object.

"all"-all operations are supported.

"none"-forbids dragging.

"uninitialized"-default value, default behavior.

Note that when effectAllowed is set to none, dragging is prohibited, but the mouse shape still shows the shape of an object without dragging. If you want not to display this mouse shape, you need to set the property returnValue of the event event of window to false.

The code is as follows:

DropEffect: sets or gets the actions allowed on the target of the drag and the associated mouse shape.

The attribute type is a string, and the range of values is as follows:

"copy"-the shape when the mouse is displayed as copied

"link"-the mouse is displayed as a connected shape

"move"-the mouse is displayed as a moving shape.

"none" (default)-the mouse is displayed as a shape without dragging.

EffectAllowed specifies the operations supported by the data source, so it is usually specified in the ondragstart event. DropEffect specifies the operations supported by the target of the drag drop, so it works with effectAllowed and is usually used in events such as ondragenter,ondragover and ondrop on the target of the drag.

The code is as follows:

Files: returns a list of dragged files FileList.

A list of the types of data (data being dragged) sent in the types:ondragstart.

The existence of the dataTransfer object makes it possible to transfer logical data between the dragged data source and the target element. Usually we use the setData method to provide data in the ondragstart event of the data source element, and then in the target element, we use the getData method to get the data.

Events triggered by dragging

Here is what happens with a drag. Basically, the order in which the events are triggered is the following:

The code is as follows:

Dragstart: triggered when the element to be dragged starts to be dragged, and this event object is the dragged element.

Drag: triggered when the element is dragged, and the event object is the dragged element.

Dragenter: triggered when you drag an element into the target element, which is the target element.

Dragover: triggered when you drag and drop an element to move over the target element, which is the target element.

Dragleave: triggered when you drag an element away from the target element, which is the target element.

Drop: triggered when the dragged element is placed inside the target element, which is the target element.

Dragend: triggered after drop, that is, when the drag is finished. This event object is the dragged element.

Basically, the parameter event of the event will be passed in the relevant elements, which can be easily modified. Here, we don't need to deal with every event, we usually just need to hook up a few major events.

Drag start-ondragstart event

The parameters passed in from this event contain a wealth of information, from which you can easily get the dragged element (event.Target); from which you can set the dragged data (event.dataTransfer.setData); so you can easily implement the logic behind the drag (of course, you can also pass other parameters when you bind).

During dragging-ondrag,ondragover,ondragenter and ondragleave events

The object of the ondrag event is the dragged element, which is usually handled less. The ondragenter event occurs when the drag enters the current element, the ondragleave event occurs when the drag leaves the current element, and the ondragover event occurs when the drag moves through the current element.

Just one thing to note here, because the browser forbids the element drop by default, so in order for the element to be drop, you need to return false in this function or call the event.preventDefault () method. As shown in the following example.

Drag end-ondrop,ondragend event

The drop event is triggered when draggable data is drop. After the drop ends, the dragend event is triggered, and this event is relatively less used.

Look at a simple example:

The code is as follows:

FunctionallowDrop (ev) {

Ev.preventDefault ()

}

Functiondrag (ev) {

Ev.dataTransfer.setData ("Text", ev.target.id)

}

Functiondrop (ev) {

Vardata=ev.dataTransfer.getData ("Text")

Ev.target.appendChild (document.getElementById (data))

Ev.preventDefault ()

}

File drag and drop

The above example has used various methods and properties of dataTransfer. Let's take a look at another interesting application on the web: drag and drop an image onto the page and display it on the page. This application uses the files attribute of dataTransfer.

The code is as follows:

HTML5 drag and drop Fil

# section {font-family: "Georgia", "Microsoft Yahei", "Chinese Song";}

.container {display:inline-block;min-height:200px;min-width:360px;color:#f30;padding:30px;border:3pxsolid#ddd;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}

.preview {max-width:360px;}

# files-list {position:absolute;top:0;left:500px;}

# list {width:460px;}

# list.preview {max-width:250px;}

# listp {color:#888;font-size:12px;}

# list.green {color:#09c;}

Drag your picture to the container below:

Documents that have been dragged in:

If (window.FileReader) {

Varlist=document.getElementById ('list')

Cnt=document.getElementById ('container')

/ / determine whether it is a picture or not

FunctionisImage (type) {

Switch (type) {

Case'image/jpeg':

Case'image/png':

Case'image/gif':

Case'image/bmp':

Case'image/jpg':

Returntrue

Default:

Returnfalse

}

}

/ / handle the list of drag-and-drop files

FunctionhandleFileSelect (evt) {

Evt.stopPropagation ()

Evt.preventDefault ()

Varfiles=evt.dataTransfer.files

For (vari=0,f;f=files [I]; iTunes +) {

Vart=f.type?f.type:'n/a'

Reader=newFileReader ()

Looks=function (fpencil IMG) {

List [XSS _ clean] + =''+ f.nameplate'('+ t +

') -' + f.size+'bytes

'+ img+'

'

CNT [XSS _ clean] = img

}

IsImg=isImage (t)

Img

/ / the image obtained by processing

If (isImg) {

Reader.onload= (function (theFile) {

Returnfunction (e) {

Img=''

Looks (theFile,img)

}

}) (f)

Reader.readAsDataURL (f)

} else {

Img=' "o (> ω)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.