The day before yesterday, I made a tree menu and asked to drag it. Very good results. For more information, see. Add:
To disable moving of selected text, FF can set CSS
Xxxx {-moz-user-select: none ;}
Other browsers can set
XXXX. onselectstart = function () {return false}
One implementation principle is to create a placeholder element (or copy a target element, that is, copy B) after clicking the target element ), then drag the target element (or the copied new element B );
After finding the corresponding position, insert the target element. Clear the placeholder element or B.
For example, there is a list:
The Code is as follows:
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
- Article 1
- Article 2
- Article 3
- Article 4
- Article 5
- Article 6
- Article 7
- Article 8
Click"
Article 1"(Recorded as element A), get""
Article 1"", Copy Element A (recorded as Element B), insert it into the document, and position Element B absolutely to element, then, when the mouse moves, Element B is dragged to determine the insertion point.
The insertion point determines the coordinates of the current mouse. If the mouse coordinates fall within the range of other LI elements except Element A, the insertion conditions are met, at the same time, the upper part is inserted to the front, and the lower part is inserted to the back. (=. = My taste is heavy. I think this passage is evil)
To indicate the insertion position, We can insert another element at the selected insertion point for benchmarking purposes only.
The following is a demo:
The Code is as follows:
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
- Article 1
- Article 2
- Article 3
- Article 4
- Article 5
- Article 6
- Article 7
- Article 8
