Drag and Drop in Web Development

I have done some drag & drop operations over the past few days. Here I will record some precautions and I will forget them, leave a tree shade for people who need to do similar jobs. The drag & Drop mentioned here refers to the built-in mechanism provided by IE, rather than the "false" Drag & Drop "simulated by the mouse, such as the effect of moving a div or span.

To implement and control the drag & Drop operation, the first point to be clear is, which elements can be drag on the web? In fact, by default, ie gives us a small number of drag elements. They are:Image,Selected text(Including text in the page text and text control (input, textarea) andConnection(Common connection and anchor ). In addition, other web elements do not support the drag operation by default (the drag operation is selected on these elements). Therefore, you must implement the default drag & drop control on the elements, only these three types of elements can be selected for operation.

Almost all HTML elements support Drag & drop (see itsReply.

Next, which elements can accept the drop operation? Visible elements on any page can accept the drop operation, but the difference between them is that the default drop event is different. For example, the default drop event of the text control (input, textarea) is to get the text content transmitted by the drag operation. The default drop operation of the IFRAME element is the URL address transmitted by the drag operation in the channel. Of course, most web elements use do nothing by default and do nothing.

What is controllable and customized when performing the drag & Drop operation? Here, Drag & Drop provides the following events (we divide themSource objectAndTarget object). First, it mainly appliesSource objectEvent:
· Ondrag-an event that is triggered during the entire process from the drag action to the end of the direct drop action.
· Ondragstart-an event triggered on the source object when the drag action starts.
· Ondragend: An event initiated on the source object at the end of the drop action.

The main task isTarget objectEvent on:
· Ondragenter-an event that is triggered on a certain target element when the drag action enters a valid target element.
· Ondragover-an event that is triggered on a certain target element after the drag action enters a valid target element.
· Ondragleave-an event triggered on the target element when the drag action leaves a valid target element.
· Ondrop -- an event triggered on the target element when the drop operation is performed on any valid target element.

The division of the source and target here is not absolute, such as the ondragover event. During the drag operation, if the mouse entersSource object. The trigger sequence of these events is: source object --> ondragstart --> ondrag --> ondragend; target object --> ondragenter --> ondragover --> (ondragleave | ondrap ). Because the events are triggered on the same object, the order is very simple. What is the trigger sequence of an event for a complete drag & Drop operation from the source object to the target object? If SRC indicates the source object and des indicates the target object, the event trigger sequence is:

SRC: ondragstart -->
SRC: ondrag --> des: ondragenter -->
Des: ondragover --> (DES: ondragleave |
Des: ondrop) --> SRC: ondragend.

Example: Drag
Source drop
Destination
// If the alert window does not respond, you can use the space key of the keyboard to determine the window.

<A onmouseover = "status = This. innertext; return true;" ondragend = "alert ('src: on' + event. Type)" onclick = "Return false;">
Drag Source </a>
<Span ondrop = "alert ('des: on' + event. type) "ondragleave =" alert ('des: on' + event. type) "> drop destination </span>

After learning about the event trigger sequence, the mouse cursor shape during the drag & Drop customization process is also very important. Because the entire process of Drag & drop needs to be guided by the shape of the mouse cursor. If you cannot adjust the cursor to a proper shape in real time, the drag & Drop operation is nothing more than an eye-catching object. IE provides two attributes for controlling the cursor shape in the drag & Drop Process. They are: effectallowed and dropeffect.

Its Attributes are:
·Effectallowed: Copy, Link, move, copylink, copymove, all, none & uninitialized.
·Dropeffect: Copy, Link, move, none.

In the former, deletallowed is used to control the allowed drag & Drop operation type, so the effect here is not the displayed "effect", but whether the operation can be executed ", this attribute can only be initialized in the ondragstart event, and then assigned to it will be invalid. Of course, if you only use the effectallowed attribute, you can control the cursor shape. Only when the effectallowed attribute is used to process composite operations, such as copylink, copymove, and all, the cursor type of the previous operation type is displayed by default. That is to say, if effectallowed is copymove, the mouse cursor is the copy shape. Now I know why I need to get a dropeffect attribute? However, the effect specified in this dropeffect attribute can only be a value in the range of operation types allowed by the previous export tallowed. Otherwise, no effect is displayed (no-drop mouse cursor is displayed ).

Example:
Drag Source drop
Destination <a ondragstart = "event. datatransfer. effectallowed = 'copymove '; event. datatransfer. dropeffect = 'move '"
Onmouseover = "status = This. innertext; return true ;"
Ondragover = "event. datatransfer. dropeffect = 'move '; event. returnvalue = false; event. cancelbubble = true ;"
Onclick = "Return false;"> Drag Source </a>
<Span ondragover = "event. datatransfer. dropeffect = 'copy'; event. returnvalue = false; event. cancelbubble = true;">
Drop destination </span>

When viewing the code, you will find that in the object elements of SRC and DES, in addition to assigning proper values to dropeffect in the ondragover event, there are two sentences:

Event. returnvalue = false;
Event. cancelbubble = true;

Only when the page element receives dragover, it has its own default mouse and Cursor Display shape, so in order to make the custom mouse and cursor take effect, you need to set the event returenvalue to false and stop the event bubble (event. cancelbubble = true ).

So far, a complete drag & Drop Process has delivered poor data, but it has been busy for a long time. This is the most important step to hide in all interactive operations and display effects. This process needs to be completed by using the DHTML data transfer object provided by IE. In the window object's attribute event object, two data transfer objects have their own instances: A datatransfer, the other is clipboardData. The behavior of the two object instances is very similar, but there are some differences. clipboardData, as its name suggests, uses the operating system clipboard to access data and has three methods; datatransfer operates its ownInternalThe clipboard is used to access data (it is automatically cleared after each ondragend event is triggered), except for the three methods that are the same as clipboardData, there are also two attributes (the two described earlier ).

We will not discuss clipboardData more here. Let's continue to look at the datatransfer object. It contains three methods: setdata (sdataformat, stext), getdata (sdataformat), and cleardata ([sdataformat]). For more detailed usage and parameters, see msdn. Here I only use them for Drag & Drop data transmission.

Example: Drag
Source drop
Destination <a ondragstart = "event. datatransfer. effectallowed = 'copymove '; event. datatransfer. dropeffect = 'move ';
Event. datatransfer. setdata ('text', this. innertext); "onmouseover =" status = This. innertext; return true ;"
Ondragover = "event. datatransfer. dropeffect = 'move '; event. returnvalue = false; event. cancelbubble = true ;"
Onclick = "Return false;"> Drag Source </a>
<Span ondrop = "This. innertext = event. datatransfer. getdata ('text'); this. style. Color = 'red ';"
Ondragover = "event. datatransfer. dropeffect = 'copy'; event. returnvalue = false; event. cancelbubble = true;">
Drop destination </span>

In fact, it is very easy to call the event in the ondragstart of SRC. datatransfer. setdata ('text', this. innertext), and then call this in the ondrop event of DES. innertext = event. datatransfer. getdata ('text.