Home > Developer > JavaScript
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:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "text/css">
* {Margin: 0; padding: 0;-moz-user-select: none ;}
Ul {margin: 100px; border: 1px solid # adff2f; list-style: none ;}
Li {height: 30px; line-height: 30px; padding: 0; list-style: none ;}
Li: hover {background: # bdb76b; cursor: move ;}
</Style>
</Head>
<Body>
<Ul id = "outer_wrap">
<Li> Article 1 </li>
<Li> Article 2 </li>
<Li> Article 3 </li>
<Li> Article 4 </li>
<Li> Article 5 </li>
<Li> Article 6 </li>
<Li> Article 7 </li>
<Li> Article 8 </li>
</Ul>
</Body>
</Html>
Click <li> Article 1 </li> (marked as element A) to obtain the position and size information of "<li> Article 1 </li>, copy Element A (recorded as Element B), insert it into the document, and position Element B to element A. move the cursor over Element B and drag it, the next step is 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:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "text/css">
* {Margin: 0; padding: 0;-moz-user-select: none ;}
Ul {margin: 100px; border: 1px solid # adff2f; list-style: none ;}
Li {height: 30px; line-height: 30px; padding: 0; list-style: none ;}
Li: hover {background: # bdb76b; cursor: move ;}
</Style>
</Head>
<Body>
<Ul id = "outer_wrap">
<Li> Article 1 </li>
<Li> Article 2 </li>
<Li> Article 3 </li>
<Li> Article 4 </li>
<Li> Article 5 </li>
<Li> Article 6 </li>
<Li> Article 7 </li>
<Li> Article 8 </li>
</Ul>
<Script type = "text/javascript">
Function $ (id ){
Return document. getElementById (id );
}
// Obtain the mouse position
Function getMousePos (e ){
Return {
X: e. pageX | e. clientX + document. body. scrollLeft,
Y: e. pageY | e. clientY + document. body. scrollTop
}
}
// Obtain the element position
Function getElementPos (el ){
Return {
X: el. offsetParent? El. offsetLeft + arguments. callee (el. offsetParent) ['X']: el. offsetLeft,
Y: el. offsetParent? El. offsetTop + arguments. callee (el. offsetParent) ['y']: el. offsetTop
}
}
// Obtain the element size
Function getElementSize (el ){
Return {
Width: el. offsetWidth,
Height: el. offsetHeight
}
}
// Disable Selection
Document. onselectstart = function (){
Return false;
}
// Determine whether there is any movement
Var MOVE = {};
MOVE. isMove = false;
// Is the benchmark created
Var div = document. createElement ('div ');
Div. style. width = '400px ';
Div. style. height = '1px ';
Div. style. fontSize = '0 ';
Div. style. background = 'red ';
Var outer_wrap = $ ('outer _ wrap ');
Outer_wrap.onmousedown = function (event ){
// Obtain the list order
Var lis = outer_wrap.getElementsByTagName ('lil ');
For (var I = 0; I <lis. length; I ++ ){
Lis [I] ['pos'] = getElementPos (lis [I]);
Lis [I] ['SIZE'] = getElementSize (lis [I]);
}
Event = event | window. event;
Var t = event.tar get | event. srcElement;
If (t. tagName. toLowerCase () = 'lil '){
Var p = getMousePos (event );
Var el = t. cloneNode (true );
El. style. position = 'absolute ';
El. style. left = t. pos. x + 'px ';
El. style. top = t. pos. y + 'px ';
El. style. width = t. size. width + 'px ';
El. style. height = t. size. height + 'px ';
El. style. border = '1px solid # d4d4d4 ';
El. style. background = '# d4d4d4 ';
El. style. opacity = '0. 7 ';
Document. body. appendChild (el );
Document. onmousemove = function (event ){
Event = event | window. event;
Var current = getMousePos (event );
El. style. left = t. pos. x + current. x-p. x + 'px ';
El. style. top = t. pos. y + current. y-p. y + 'px ';
Document. body. style. cursor = 'move ';
// Determine the insertion point
For (var I = 0; I <lis. length; I ++ ){
If (current. x> lis [I] ['pos'] ['X'] & current. x <lis [I] ['pos'] ['X'] + lis [I] ['SIZE'] ['width'] & current. y> lis [I] ['pos'] ['y'] & current. y <lis [I] ['pos'] ['y'] + lis [I] ['SIZE'] ['height']/2 ){
If (t! = Lis [I]) {
MOVE. isMove = true;
Outer_wrap.insertBefore (div, lis [I]);
}
} Else if (current. x> lis [I] ['pos'] ['X'] & current. x <lis [I] ['pos'] ['X'] + lis [I] ['SIZE'] ['width'] & current. y> lis [I] ['pos'] ['y'] + lis [I] ['SIZE'] ['height']/2 & current. y <lis [I] ['pos'] ['y'] + lis [I] ['SIZE'] ['height']) {
If (t! = Lis [I]) {
MOVE. isMove = true;
Outer_wrap.insertBefore (div, lis [I]. nextSibling );
}
}
}
}
// Remove the event
Document. onmouseup = function (event ){
Event = event | window. event;
Document. onmousemove = null;
If (MOVE. isMove ){
Outer_wrap.replaceChild (t, div );
MOVE. isMove = false;
}
Document. body. removeChild (el );
El = null;
Document. body. style. cursor = 'normal ';
Document. onmouseup = null;
}
}
}
</Script>
</Body>
</Html>
The demo code details above are not considered and are only for demonstration.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
