Add one point:
To prevent the movement of selected text, FF can set CSS
Xxxx{-moz-user-select:none;}
Other browsers can set the
Xxxx.onselectstart = function () {return false}
One principle is to create a placeholder element (or copy a target element, copy b) after clicking on the target element, and then drag the target element (or a copy of the new element B);
After the corresponding location is found, insert the target element. Clear the placeholder element or B.
For example, there is a list:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<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>
<body>
<ul id= "Outer_wrap" >
<li> the first one </li>
<li> Article II </li>
<li> Article III </li>
<li> Fourth Article </li>
<li> Fifth Article </li>
<li> Sixth article </li>
<li> Seventh Article </li>
<li> Eighth Article </li>
</ul>
</body>
Click on "<li> First </li>" (recorded as element a), get position and size information for "<li> first </li>", copy element a once (in element B), and insert the document. The element B is absolutely positioned to the position of element A, then the mouse moves, element B drags along, and then the insertion point is judged.
To determine the insertion point is to determine the current mouse coordinates, if the mouse coordinates in addition to element a outside of the range of Li elements, to meet the conditions can be inserted, while the upper part is inserted into the front, the lower part is inserted into the back. = = Personal taste is heavy, think this passage is good evil AH)
To mark the insertion position, we insert an additional element at the selected insertion point, which is used only as a benchmark.
Here is a demo:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<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>
<body>
<ul id= "Outer_wrap" >
<li> the first one </li>
<li> Article II </li>
<li> Article III </li>
<li> Fourth Article </li>
<li> Fifth Article </li>
<li> Sixth article </li>
<li> Seventh Article </li>
<li> Eighth Article </li>
</ul>
<script type= "Text/javascript" >
function $ (ID) {
return document.getElementById (ID);
}
Get mouse position
function Getmousepos (e) {
return {
X:e.pagex | | E.clientx + Document.body.scrollLeft,
Y:e.pagey | | E.clienty + Document.body.scrollTop
}
}
Get 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
}
}
Get element dimensions
function Getelementsize (EL) {
return {
Width:el.offsetWidth,
Height:el.offsetHeight
}
}
No selection
Document.onselectstart = function () {
return false;
}
To determine if there is a move
var move = {};
Move.ismove = false;
is to create the benchmark
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) {
Get list Order
var lis = outer_wrap.getelementsbytagname (' li ');
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.target | | Event.srcelement;
if (t.tagname.tolowercase () = = ' Li ') {
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 ';
To 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 '] && Amp 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);
}
}
}
}
removing events
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>
The above demo code details are not considered, only for display principle.
