Five steps to understand ext drag and drop (below)

Document directory

• Step 3: set the target
• Step 4: complete placement
• Step 5: add to the invitation (drop invitation)
• Continue reading
• Summary

URL: http://blog.csdn.net/zhangxin09/archive/2010/05/03/5551665.aspx
.

Step 3: set the target

Determine what the requirements are:Rented
AndRepair
The drag elements are acceptable. Cars and trucks are also acceptable. In short, it is used
Ddtarget

To be responsible for the Goals to be put down. The Code is as follows:

// Instantiate instances of Ext. DD. ddtarget for the cars and <br/> trucks container <br/> var carsddtarget = new Ext. DD. ddtarget ('cars ', 'carsddgroup'); <br/> var trucksddtarget = new Ext. DD. ddtarget ('trucks ', 'trucksddgroup '); </P> <p> // instantiate instnaces of ddtarget <br/> for the rented and repair drop target elements <br/> var rentedddtarget = new Ext. DD. ddtarget ('rented', 'carsddgroup'); <br/> var repairddtarget = new Ext. DD. ddtarget ('repair ', 'carsddgroup '); </P> <p> // ensure that the rented and repair <br/> ddtargets will participate in the trucksddgroup <br/> rentedddtarget. addtogroup ('trucksddgroup'); <br/> repairddtarget. addtogroup ('trucksddgroup ');

In the above CodeCars
,Trucks,
Rented

AndRepair
Set the destination. Note:Cars
Container elements can only be dragged to carsddgroup,Trucks
The elements of the container can only be dragged to the "trucksddgroup. NextRented

AndRepair
OfDdtarget

Settings. Here, the constructor defines carsddgroup and the trucksddgroup added to the addtogroup method. Both methods are supported.

OK. You have set the target. The following is the result after the bucket is set as valid.

Click image
Open the demo.

We can see that these drag elements have successfully arrived at the destination, but the picture is messy, you still have to sort it out, that is, to continue to say "complete down complete
Drop. Also rewriteDd

Instance method.

Step 4: complete placement

The essence is to use the DOM method to change the elements of the origin point to the target parent element. Rewrite the followingOndragdrop
Method.

// After the drag-and-drop process is successful, execute this method E <br/> ondragdrop: function (evtobj, targetelid) {<br/> // create ext for the target. element instance <br/> var dropel = ext. get (targetelid); </P> <p> // if it is not in the same drop area, the drop operation is complete. The same target is meaningless. <Br/> If (this. El. Dom. parentnode. ID! = Targetelid) {</P> <p> // move the element <br/> dropel. appendchild (this. el); </P> <p> // remove the drag invitation <br/> This. ondragout (evtobj, targetelid); </P> <p> // clear the style <br/> This. el. dom. style. position = ''; <br/> This. el. dom. style. top = ''; <br/> This. el. dom. style. left = ''; <br/>}< br/> else {<br/> // invalid drop <br/> This. oninvaliddrop (); <br/>}

If it is not in the same drop area, the placement is complete. The same target is meaningless and is regarded as invalid drop. Therefore, oninvaliddrop is executed.

 

Click to film
Complete configuration operations for viewing.

As long as it can be successfully set, the elements under the parent element will no longer exist and move to the next target.

If the drag operation is within the valid target range, should the user give them a prompt? The following is a drop invitation, which is to tell the user that you are coming soon.

Step 5: add to the invitation (drop invitation)

As mentioned above, what we rewrite at this moment isOndragenter
AndOndragout
Method.

// Only called when the drag element is dragged over the drop <br/> target with the same ddgroup <br/> ondragenter: function (evtobj, targetelid) {<br/> // Add CSS color <br/> If (targetelid! = This. el. dom. parentnode. ID) {<br/> This. el. addclass ('dropok'); <br/>}< br/> else {<br/> // remove the invitation <br/> This. ondragout (); <br/>}< br/>}, <br/> // triggered when the drag range is left <br/> ondragout: function (evtobj, targetelid) {<br/> This. el. removeclass ('dropok'); <br/>}

Of course,Ondragenter
AndOndragout
The interaction takes effect only in the same DD group.

Ondragenter

The method is triggered when the mouse pointer hits the edge of the lower area. Otherwise,Ondragout
The method is triggered immediately when the edge is left.

 

Click the image above
Show the drop invitation.

Through the demonstration, we can see that when we enter the drop-down area, the actual effect will be highlighted (green around) and will not be displayed when we leave the area.

Continue reading

In the ext JS framework, many components can be dragged and dropped. The following examples are used to further deepen the learning of drag-and-drop operations (officially ):

• Gridpanel to gridpanel

• Grid to formpanel
• Ext. Form. Field to gridpanel Cell
• Use of dragzone and dropzone
• Dataview to treepanel

Summary

In today's learning process, we learned how to use the bottom-layer drag-and-drop class implementation to complete the drag-and-drop of DOM nodes. We hope that you can get some basic operational principles of DD operations, and we hope that you can write more articles on this aspect in the future.