Five steps to understand ext drag and drop (on)

Document directory

• Define drag and drop
• Structure of drag-and-drop classes
• Let's talk about this example ......
• Step 1: start dragging
• Step 2: fix the problem

5-step control of ext drag and drop
5 steps to understanding drag and drop with ext
JS
September 13,200 9 by Jay Garcia Translation: Frank

In so many interactive design modes
"Drop)" mode is quite good for developers. When users perform drag-and-drop operations on a daily basis, they do not need to think about it. It is easy to learn and use, and intuitive. In this article, we do not assert that, as long as we understand the essentials of the following five steps, drag and drop is no longer a difficult task.

Define drag and drop

The drag action is the mouse clicking action. When you click on some UI elements, you can move the mouse or drop it) after the drag action starts, the mouse button is released.

In general, the drag-and-drop operation can be described using the following flowchart.

 

To accelerate development, ext JS originally provided Ext. dd
To implement drag-and-drop support. In this blog, we will focus on the problems of the drag-and-drop action, such as triggering, ineffective removal, and successful removal, as well as event message programming, the problem of modifying the appearance is also discussed.

Structure of drag-and-drop classes

Some people may be afraid of Ext. DD, but if we observe the source code with a little patience, we will find that many classes inherit from dragdrop.
Class, which is divided into two categories: "drag" and "Drop Down. The objects targeted by the classification are the drag-and-drop behavior modes of one or more nodes. The results can be seen from the class organization.

 

We plan to discuss from the simplest Dom node single drag and drop knowledge points, in order to better reduce the learning curve, suitable for beginners. The question is to useDd

AndDdtarget

Class extends the basic custom drag-and-drop behavior.

However, we must first introduce the routine and how it is intended.

Let's talk about this example ......

Suppose there is such a requirement that the customer is a taxi company, renting cars and trucks. He hopes these cars can be in three states: Available, rented, in
Repaire is under repair. As a classification, cars and trucks can only be in their respective "available" containers.

In the beginning, the first goal is to make cars and trucks "drag-and-drop" status, which we will useDd

Second, let'sRented
,Repair

,Vehicle
We will use this as the target location for "availability (availability )"Ddtarget

. Finally, we will arrange two drag-and-drop groups (drag drop
Groups) separates vehicles and trucks. Different "available" serving containers do not make a mistake.

The HTML and CSS of this routine are ready.
Download. After the download, you can start to drag these cars and trucks.

Step 1: start dragging

To make the DIV where the car is located traceable, you must first obtain these Div sets. After the collection is obtained, it is an array, and we traverse it to create dd
Instance. The following source code is the process of this step.

// Create an object that overwrites the drag behavior and try again later. <Br/> var overrides ={}; <br/> // configure the variable that cars can drag <br/> var carelements = ext. get ('cars '). select ('div '); <br/> Ext. each (carelements. elements, function (EL) {<br/> var dd = new Ext. DD. dd (El, 'carsddgroup', {<br/> istarget: false <br/> }); <br/> // copy the overrides object to the newly created dd instance <br/> Ext. apply (DD, overrides); <br/>}); </P> <p> var truckelements = ext. get ('trucks '). select ('div '); <br/> Ext. each (truckelements. elements, function (EL) {<br/> var dd = new Ext. DD. dd (El, 'trucksddgroup', {<br/> istarget: false <br/>}); <br/> Ext. apply (DD, overrides); <br/> });

All drag-and-drop classes are involved in the "Method rewriting (methods)
Overridings )". The above declares an empty overrides object, which will be overwritten by the Action method to be arranged later. This emphasizes the code signature (Code
Segment.

To query all sub-DIV elements in the cars container, we can useDomquery

Select the function of the element.

To change the cars and trucks elements to dragable, we create a newDd

For example, the input parameter is the DOM element of cars and trucks, and also indicates the drag-and-drop group to which the car belongs. That is to say, the car should be in the drag-and-drop Group of the car, and the truck should be in the truck drag-and-drop group. What is a drag-and-drop group? Buy a customs gateway first, and wait until we know how to set up a drag-and-drop group.Rented

AndRepair
When setting the target.

Note that we rewriteDd

TheExt. Apply

This is a function that adds object attributes or methods, which is very convenient.

Before proceeding to the next step, we have to spend some time analyzing what will happen to the screen when dragging elements, so that we can understand why and then understand the following code.

How to drag Elements

It should be noted that when moving a car or truck, it should be placed wherever it is, because our example is step by step, from simple to complex, therefore, the example here is purely "drag (drag)", that is, we split the drag-and-drop process from it. So moving or dragging to a destination is a valid destination. Does it not meet the requirements of our program? This is the difference between valid and invalid settings. Relatively, we only understand that "invalid
Drop) "to clearly understand the logic of effective placement.

The following illustration is from firebug.
The HTML detection Panel informs the DIV elements being dragged through the highlighted effect, that is, the Camaro element (an estimate of a car brand ).

 

Click the image above
Test the drag operation ..

Observe that the style attributes under the element have three new CSS values: Position, top, and left, when position is defined as relative, the elements can be moved up on the page. While moving, the values of top and left are also changing and constantly updated (the binary value is the reference coordinate of the element ). It can be seen that the principle of dragging is to define these three values.

After the drag gesture is complete, the style attribute remains unchanged. Of course, if you drag it again, the style will change again, but in principle, we should not, instead, the element is ordered to return to the original position in the invalid drop state. Any placement action can be regarded as invalid drop before setting a valid target.

Step 2: fix the problem

Fixed the invalid drop, which is actually used to "reset" The dragged element ". How can we use the "homing" method? Since the Style of the element is modified before, "homing" means restoring the style to the value before dragging. The simplest way is to trigger the event when the mouse button is released, the dragged element disappears immediately, and then appears again at the original position. A simple method like this is either difficult or hard to use.Ext. FX

The gradient process appears smoother for the whole process.

The repair method we want to rewrite is as follows:B4startdrag
,Oninvaliddrop
And
Enddrag.

Add the following methods to the overrides object.

// Obtain the dragged element <br/> b4startdrag: function () {<br/> // cache the drag element <br/> If (! This. el) {<br/> This. el = ext. get (this. getel (); <br/>}</P> <p> // write down the original coordinates first, which is useful later <br/> This. originalxy = This. el. getxy (); <br/>}, <br/> // The drop is invalid if it is not in a drag-and-drop group. <br/> oninvaliddrop: function () {<br/> // set a flag to invoke the animated <br/> repair <br/> This. invaliddrop = true; <br/>}, <br/> // After the drag operation is completed, run <br/> enddrag: function () {<br/> // invalid true logic <br/> If (this. invaliddrop = true) {<br/> // remove the drop invitation <br/> This. el. removeclass ('dropok'); </P> <p> // define the animation configuration item object <br/> var animcfgobj ={< br/> easing: 'elasticicout ', <br/> Duration: 1, <br/> scope: This, <br/> callback: function () {<br/> // remove the position attribute <br/> This. el. dom. style. position = ''; <br/>}< br/>}; </P> <p> // apply the animation <br/> This. el. moveTo (this. originalxy [0], this. originalxy [1], animcfgobj); <br/> delete this. invaliddrop; <br/>}</P> <p >}, <br/>
FirstB4startdrag
Method. As the name suggests, it is called before being dragged and dropped. To some extent, it is also an event. It is used to write down the original XY coordinate of the element, that is, the position before being dragged. This coordinate is used to return data.Enddrag
It is an invalid notification method for invaliddrop. Invalid drop as mentioned earlier, it indicates serving in different DD groups. It is regarded as invalid serving. Here we only set instance PropertiesInvaliddrop
Is true, which is a simple identifier. The last override methodEnddrag
It is called every time the drag ends. At this time, the elements cannot be dragged by the mouse. If the destination is not successfully reached, return to the original location based on the XY coordinates. In this example, we useElasticout
Animation to beautify the effect.

 

Click the image above
You can demonstrate the animation modification process.

OK. The process of fixing the drop operation is now complete. The next step is to create a place object, which is equivalent
Target.

For the complete dd tutorial, see the next decomposition.
.