How to use javascript to drag and drop 2

<Base href = 'HTTP: // www.blueidea.com '> <FIELDSET id = Demo5 style = "HEIGHT: 70px"> Demo-Drag any of the images </FIELDSET>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
You will notice that this code is almost the complete set above, and the drag effect is achieved by combining the previous one.

When we click an item, we get a lot of variables, such as the mouse position. The mouse position naturally contains the coordinate information of the item. if we click the center of a 20*20 PX image, the relative coordinates of the mouse are {x: 10, y: 10 }. when we click the upper left corner of the image, the relative coordinates of the mouse are {x: 0, y: 0 }. when we click, we use this method to obtain information about Mouse and image verification. if the page item cannot be loaded, the information will be the document information, and the clicked item information will be ignored.

The mouseOffset function uses another function, getPosition. getPosition is used to return the coordinates of the item in the upper left corner of the page. offsetLeft or item. style. left, then we will get the position of the item relative to the parent level, not the entire document. all scripts are relative to the entire document, which is better.

To complete the getPosition task, you must cyclically obtain the parent level of the item. We will load the content to the position on the left/top of the item. We need to manage the desired top and left lists.

Since the mousemove function is defined, mouseMove will continue to run. first, determine the style of the item. position is absolute. Second, we move the item to the position defined above. when mouse clicks are released and dragObject is set to null, mouseMove will not do anything.

Dropping an Item

The purpose of the preceding example is to drag the item to the desired place. we often have other purposes, such as deleting items. For example, we can drag items into a waste bin or place defined on other pages.

Unfortunately, we have a big problem. When we drag, the item will be under the mouse, such as mouseove, mousedown, mouseup or other mouse actions. if we drag an item to the recycle bin, the mouse information is still on the item, not on the recycle bin.

How can this problem be solved? There are several ways to solve this problem. first, this is previously recommended. When we move the mouse, the item will follow the mouse and take over mouse events such as mouseover/mousemove. We will not do this, but let the item follow the mouse, it does not occupy mouse events such as mouseover. This will solve the problem, but it is not nice. We still hope that the item can be directly under the mouse.

Another option is not to drag items. You can change the mouse pointer to display the items to be dragged and place them in the place where the mouse is released. This solution is unacceptable for aesthetic reasons.

The final solution is that we do not remove the drag effect. this method is much more complicated than the first two methods. We need to define the list of targets to be released. When the mouse is released, manually check whether the released position is in the target list, it indicates the target location is released.
Copy codeThe Code is as follows:
/*
All code from the previous example is needed with the exception
Of the mouseUp function which is replaced below
*/

Var dropTargets = [];

Function addDropTarget (dropTarget ){
DropTargets. push (dropTarget );
}

Function mouseUp (ev ){
Ev = ev | window. event;
Var mousePos = mouseCoords (ev );

For (var I = 0; I <dropTargets. length; I ++ ){
Var curTarget = dropTargets [I];
Var targPos = getPosition (curTarget );
Var targWidth = parseInt (curTarget. offsetWidth );
Var targHeight = parseInt (curTarget. offsetHeight );

If (
(MousePos. x> targPos. x )&&

(MousePos. x <(targPos. x + targWidth ))&&
(MousePos. y> targPos. y )&&
(MousePos. y <(targPos. y + targHeight ))){
// DragObject was dropped onto curTarget!
}
}

DragObject = null;
}


<Base href = 'HTTP: // www.blueidea.com '> <FIELDSET id = Demo6 style = "HEIGHT: 70px"> Demo-Drag any image onto the trashcan </FIELDSET>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

When the mouse is released, it determines whether the drop attribute exists. If the mouse pointer exists within the drop range, the drop operation is executed. we check whether the cursor position is in the target range (mousePos. x> targetPos. x), and the condition (mousePos. x <(targPos. x + targWidth )). if all the conditions match, the pointer is indeed within the range, and the drop command can be executed.

Pulling It All Together

Finally, we have all the drag/drop script fragments! The next thing is that we will create a DOM processing. If you are not familiar with it, please read my JavaScript Primer on DOM Manipulation first.

The following code creates a container and converts any item that requires drag/drop to an item of a container. the code is next to the second demo in this article. You can record a list as a navigation window on the left or right, or more functions.

In the next step, we will use "fake code" to let reader see the real code. The following is a recommendation:

1. When document is loaded for the first time, create dragHelper DIV. dragHelper adds a shadow to the moved item. the real item is not dragged, but insertBefor and appendChild are used to move it. We have hidden dragHelper.

2. With the mouseDown and mouseUp functions, all operations will correspond to the iMouseDown status. iMouseDown is true only when the left mouse button is pressed. Otherwise, it is false.

3. We created the global variable DragDrops and the global function CreateDragContainer. dragDrops contains a series of relative containers. any parameter (containers) will be reorganized and serialized through CreatedcragContainer, so that it can be freely moved. the CreateDragContainer function also binds items and sets attributes.

4. Now our code knows how to add each item. When we move mouseMove, The mouseMove function first sets the variable target and moves the cursor over the item, if this item is in the container (checked with getAttribute ):

Run a short piece of code to change the target style.
Check whether the mouse is open. If not
Set curTarget to represent the current item
Record the current position of the item. If necessary, we can return it
Clone the current item to dragHelper. We can move the item with shadow effect.
After the item is copied to dragHelper, the original item is still under the mouse pointer. We must delete dragObj, so that the script works and dragObj is included in a container.
Capture the current coordinates, height, and width of all items in the container, so that only one record is required. when the item is drag, every time it moves with the mouse, thousands of records are recorded every shift.
If no, you do not need to do anything, because this is not an item that needs to be moved.
5. Check curTarget. It should contain a moved item. If so, perform the following operations:

Start to move the shadow item, which is created in the previous article.
Check whether the container in each current container has been moved to these ranges.
Check to see which container the dragged item belongs.
Place the item before an item in a iner, or after the entire container
Confirm that item is visible
If the cursor is not in the iner, make sure that the item is invisible.
6. The rest is to capture the mouseUp event.
<Base href = 'HTTP: // www.blueidea.com '> <STYLE> LI {MARGIN-BOTTOM: 10px} OL {MARGIN-TOP: 5px }. dragContainer {BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid }. overDragContainer {BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid }. overDragContainer {BACKGROUND-COLOR: # eee }. dragBox {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: # eee }. overDragBox {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: # eee }. dragDragBox {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: # eee }. miniDragBox {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: # eee }. overDragBox {BACKGROUND-COLOR: # ffff99 }. dragDragBox {BACKGROUND-COLOR: # ffff99 }. dragDragBox {FILTER: alpha (opacity = 50); BACKGROUND-COLOR: # ff99cc} LEGEND {FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana, tahoma, arial} FIELDSET {PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px }. history {FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana, tahoma, arial; HEIGHT: 82px} # DragContainer8 {BORDER-RIGHT: #669999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #669999 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: #669999 1px solid; WIDTH: 110px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 1px solid; HEIGHT: 110px }. miniDragBox {FLOAT: left; MARGIN: 0px 5px 5px 0px; WIDTH: 20px; HEIGHT: 20px} pre {border: 1 solid # CCC; background-color: # F8F8F0; padding: 10px ;} </STYLE> Item #1 Item #2 Item #3 Item #4 Item #5 Item #6 Item #7 Item #8 Item #9 Item #10 Item #11 Item #12
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

You now have everything to drag.

The following three demos record the Event History. when you move the mouse over the item, you will record the events generated. If you do not understand, you can try to move or drag the mouse to see what happened.
<Base href = 'HTTP: // www.blueidea.com '> <STYLE type = text/css> LI {MARGIN-BOTTOM: 10px} OL {MARGIN-TOP: 5px }. dragContainer {BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid }. overDragContainer {BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid }. overDragContainer {BACKGROUND-COLOR: # eee }. dragBox {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: # eee }. overDragBox {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: # eee }. dragDragBox {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: # eee }. miniDragBox {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: # eee }. overDragBox {BACKGROUND-COLOR: # ffff99 }. dragDragBox {BACKGROUND-COLOR: # ffff99 }. dragDragBox {FILTER: alpha (opacity = 50); BACKGROUND-COLOR: # ff99cc} LEGEND {FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana, tahoma, arial} FIELDSET {PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px }. history {FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana, tahoma, arial; HEIGHT: 82px} # DragContainer8 {BORDER-RIGHT: #669999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #669999 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: #669999 1px solid; WIDTH: 110px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 1px solid; HEIGHT: 110px }. miniDragBox {FLOAT: left; MARGIN: 0px 5px 5px 0px; WIDTH: 20px; HEIGHT: 20px} PRE {BORDER-RIGHT: # ccc 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: # ccc 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: # ccc 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: # ccc 1px solid; BACKGROUND-COLOR: # f8f8f0 }</STYLE> <body> <FIELDSET id = Demo0> Demo-Drag and Drop any item Item #1 Item #2 Item #3 Item #4 Item #5 Item #6 Item #7 Item #8 Item #9 Item #10 Item #11 Item #12 <FIELDSET> <LEGEND> History </LEGEND> </FIELDSET> <FIELDSET id = Demo7> <LEGEND> Demo-Drag and Drop any item </LEGEND> <OL id = DragContainer7 history = "History1"> <LI id = ListItem1> Item #1 <LI id = ListItem2> Item #2 <LI id = ListItem3> Item #3 <LI id = ListItem4> Item #4 <LI id = ListItem5> Item #5 </LI> </ OL> </FIELDSET> <FIELDSET id = Demo8> Demo-Drag and Drop any item 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </FIELDSET> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]