Home > Others

The code for Imitating jquery sortable is incorrect, but it is worth looking.

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

CopyCode The 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 xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title>
Imitating jquery sortable
</Title>
<Style type = "text/CSS">
Ul
{
Width: 200px;
List-style-type: none;
Margin: 0px;
Padding: 0px;
}
Li
{
Height: 100px; width: 202px
}
</Style>

<SCRIPT type = "text/JavaScript">
VaR sortabledoubleul =
{
Offsetyinsertdiv: Document. All? -10:-3,
Srcul: false,
Leftul: "leftul ",
Rightul: "rightul ",
Moveableul: false,
Movecounter:-1,
Srcli: false,
Srcnextsibling: false,
Leftposofleftul: false,
Widthofleftul: false,
Leftposofrightul: false,
Widthofrightul: false,
Insertdiv: false,
Insertasfirstnode: false,
Descelement: false,
Timer: 10,
Init: function ()
{
This. leftul = Document. getelementbyid (this. leftul); // <ul id = "arrangablenodes">
This. rightul = Document. getelementbyid (this. rightul); // <ul id = "ul2">
VaR moveableul = Document. createelement ('ul ');
VaR moveablediv = Document. createelement ("Div ");
Moveablediv. appendchild (moveableul );
Moveablediv. style. Position = "absolute ";
Document. Body. appendchild (moveablediv );
This. moveableul = moveableul;
VaR insertdiv = Document. createelement ("Div ");
Insertdiv. style. Position = "absolute ";
Insertdiv. style. Display = "NONE ";
Document. Body. appendchild (insertdiv );
Insertdiv. innerhtml = " ";
This. insertdiv = insertdiv;
This. leftposofleftul = This. getabsoluteleftpos (this. leftul );
This. leftposofrightul = This. getabsoluteleftpos (this. rightul );
This. insertdiv. style. Left = This. leftposofleftul-5 + 'px ';
This. widthofleftul = This. leftul. offsetwidth;
This. widthofrightul = This. rightul. offsetwidth;
VaR leftli = This. leftul. getelementsbytagname ('lil ');
For (VAR I = 0; I <leftli. length; I ++)
{
Leftli [I]. onmousedown = This. initmovenode;
// Text cannot be copied
Leftli [I]. onselectstart = This. cancelevent;
}
VaR rightli = This. rightul. getelementsbytagname ('lil ');
For (VAR I = 1; I <rightli. Length-1; I ++)
{
Rightli [I]. onmousedown = This. initmovenode;
// Text cannot be copied
Rightli [I]. onselectstart = This. cancelevent;
}
Document.doc umentelement. onmouseup = This. nodestopmove;
Document.doc umentelement. onmousemove = This. nodemove;
Document.doc umentelement. onselectstart = This. cancelevent;
},
Cancelevent: function () {return false}, // No event
Getabsolutetoppos: function (srcobj) // obtain the absolute position of the control from the top of the document.
{
VaR returnvalue = srcobj. offsettop;
While (srcobj = srcobj. offsetparent )! = NULL)
{
Returnvalue + = srcobj. offsettop;
}
Return returnvalue;
},
Getabsoluteleftpos: function (srcobj) // obtain the absolute position of the control from the bottom of the document.
{
// If the position of the parent element is not relative or absolute, it will be searched up until the body
VaR returnvalue = srcobj. offsetleft;
While (srcobj = srcobj. offsetparent )! = NULL)
{
Returnvalue + = srcobj. offsetleft;
}
Return returnvalue;
},
Initmovenode: function (e) // initialize the Li node when you press Li.
{
// Clearmovablediv ();
If (document. All)
{
E = event;
}
// Clears the node from 0 each time it is initialized
Sortabledoubleul. movecounter = 0;
Sortabledoubleul. srcli = this;
Sortabledoubleul. srcul = This. parentnode;
If (this. nextsibling)
Sortabledoubleul. srcnextsibling = This. nextsibling;
Else sortabledoubleul. srcnextsibling = false;
Sortabledoubleul. movenodebytimer ();
Sortabledoubleul. moveableul. parentnode. style. Left = E. clientx + 'px ';
Sortabledoubleul. moveableul. parentnode. style. Top = E. clienty + 'px ';
Return false;
},
Movenodebytimer: function ()
{
If (this. movecounter> = 0 & this. movecounter <10)
{
This. movecounter = This. movecounter + 1;
SetTimeout ('sortabledoubleul. movenodebytimer () ', this. Timer );
}
If (this. movecounter> = 10)
{
This. moveableul. appendchild (this. srcli );
}
},
Nodemove: function (E)
{
If (document. All) E = event;
// The selected time cannot be moved.
If (sortabledoubleul. movecounter <10) return;
If (document. All & sortabledoubleul. movecounter> = 10 & E. Button! = 1 & navigator. useragent. indexof ('Opera ') =-1 ){
Alert ("non-Microsoft & more than mobile time ");
Sortabledoubleul. nodestopmove ();
}
// The ul position to be moved follows the mouse position
Sortabledoubleul. moveableul. parentnode. style. Left = E. clientx + 'px ';
Sortabledoubleul. moveableul. parentnode. style. Top = E. clienty + 'px ';
// Temporary variables Save the start position of the mouse moving the Y axis
VaR tmpy = E. clienty;
VaR tmpx = E. clientx;
Sortabledoubleul. insertdiv. style. Display = 'none ';
Sortabledoubleul. descelement = false;
// Window. status = tmpx + ":" + tmpy + "ul1left:" + leftposarrangablenodes + "|" + (leftposarrangablenodes + widtharrangablenodes) + "ul2left: "+ leftposarrangablenodes2 +" | "+ (leftposarrangablenodes2 + widtharrangablenodes2 );
If (tmpx> sortabledoubleul. leftposofleftul & tmpx <(sortabledoubleul. leftposofleftul + sortabledoubleul. widthofleftul ))
{
VaR leftli = sortabledoubleul. leftul. getelementsbytagname ('lil ');
Sortabledoubleul. insertdiv. style. Left = (sortabledoubleul. leftposofleftul + sortabledoubleul. offsetyinsertdiv) + 'px ';
For (VAR I = 0; I <leftli. length; I ++)
{
// Obtain the top position of Li
VaR toppos = sortabledoubleul. getabsolutetoppos (leftli [I]);
// Obtain the original height of Li
VaR tmpheight = leftli [I]. offsetheight;
If (I = 0)
{
If (tmpy <= toppos & tmpy> = topPos-5)
{
Sortabledoubleul. insertdiv. style. Top = (toppos + sortabledoubleul. offsetyinsertdiv) + 'px ';
Sortabledoubleul. insertdiv. style. Display = 'block ';
Sortabledoubleul. descelement = leftli [I];
Sortabledoubleul. insertasfirstnode = true;
Return;
}
}
If (tmpy> = toppos & tmpy <= (toppos + tmpheight ))
{
Sortabledoubleul. insertdiv. style. Top = (toppos + tmpheight + sortabledoubleul. offsetyinsertdiv) + 'px ';
Sortabledoubleul. insertdiv. style. Display = 'block ';
Sortabledoubleul. insertasfirstnode = leftli [I];
Sortabledoubleul. descelement = leftli [I];
Insertasfirstnode = false;
Return;
}
}
}
Else if (tmpx> sortabledoubleul. leftposofrightul & tmpx <(sortabledoubleul. leftposofrightul + sortabledoubleul. widthofrightul ))
{
VaR rightli = sortabledoubleul. rightul. getelementsbytagname ('lil ');
Sortabledoubleul. insertdiv. style. Left = (sortabledoubleul. leftposofrightul + sortabledoubleul. offsetyinsertdiv) + 'px ';
For (VAR I = 0; I <rightli. length; I ++)
{
// Obtain the top position of Li
VaR toppos = sortabledoubleul. getabsolutetoppos (rightli [I]);
// Obtain the original height of Li
VaR tmpheight = rightli [I]. offsetheight;
If (I = 0)
{
If (tmpy <= toppos & tmpy> = topPos-5)
{

Sortabledoubleul. insertdiv. style. Top = (toppos + sortabledoubleul. offsetyinsertdiv) + 'px ';
Sortabledoubleul. insertdiv. style. Display = 'block ';
Sortabledoubleul. descelement = rightli [I];
Sortabledoubleul. insertasfirstnode = true;
Return;
}
}
If (tmpy> = toppos & tmpy <= (toppos + tmpheight ))
{
Sortabledoubleul. insertdiv. style. Top = (toppos + tmpheight + sortabledoubleul. offsetyinsertdiv) + 'px ';
Sortabledoubleul. insertdiv. style. Display = 'block ';
Sortabledoubleul. descelement = rightli [I];
Sortabledoubleul. insertasfirstnode = false;
Return;
}
}
}
Else
{
Return;
}
},
Clearmovenode: function ()
{
This. descelement = false;
If (sortabledoubleul. moveableul. getelementsbytagname ('lil'). length> 0)
{
If (sortabledoubleul. srcnextsibling)
This. srcul. insertbefore (sortabledoubleul. srcli, sortabledoubleul. srcnextsibling );
Else sortabledoubleul. srcul. appendchild (sortabledoubleul. srcli );
}
},
Nodestopmove: function (E)
{
Sortabledoubleul. movecounter =-1;
Sortabledoubleul. insertdiv. style. Display = 'none ';
// If the target is found
If (sortabledoubleul. descelement)
{
VaR parentul = sortabledoubleul. descelement. parentnode;
VaR li = parentul. getelementsbytagname ('lil ');
If (sortabledoubleul. descelement = Li [0] & sortabledoubleul. insertasfirstnode)
{
If (parentul = sortabledoubleul. rightul)
{
Alert ("the first node must be document drafting ")
Sortabledoubleul. clearmovenode ();
}
Else
{
Parentul. insertbefore (sortabledoubleul. srcli, sortabledoubleul. descelement );
}
}
Else
{
If (sortabledoubleul. descelement. nextsibling)
{
Parentul. insertbefore (sortabledoubleul. srcli, sortabledoubleul. descelement. nextsibling );
}
Else
{
If (parentul = sortabledoubleul. rightul)
{
Sortabledoubleul. clearmovenode ();
Alert ("the last node must be a document delivery ")

}
Else
{
Parentul. appendchild (sortabledoubleul. srcli );
}
}
}
}
Else
{
// Not found
Alert ("not found ");
Sortabledoubleul. clearmovenode ();
}
}
};
</SCRIPT>

</Head>
<Body>
<H1>
Arrange the nodes below

<Table Style = "border: # CCC 1px solid;">
<Tr>
<TD style = "width: 2000px; Border: # CCC 1px solid;">
<Input id = "text1" style = "width: 500px; Height: 300px;" type = "text"/>
Sfsfa

</TD>
<TD style = "width: 400px; Border: # CCC 1px solid;">
<Div>
<Div style = "padding: 5px">
<Ul id = "leftul" style = "height: 500px; overflow: auto;">
<Li id = "node1">

</LI>
<Li id = "node2"> </LI>
<Li id = "node3"> </LI>
<Li id = "node4"> </LI>
<Li id = "node5"> </LI>
<Li id = "node6"> </LI>
</Ul>
</Div>
</Div>
</TD>
<TD style = "width: 400px; width: 400px; Border: # CCC 1px solid;">
<Ul id = "rightul" style = "height: 500px; overflow: auto;">
<Li id = "Li1">
<Div>
N11 </div>
</LI>
<Li id = "li2"> n12 </LI>
<Li id = "li3"> N13 </LI>
<Li id = "LI4"> N14 </LI>
<Li id = "li5"> N15 </LI>
<Li id = "li6"> n16 </LI>
</Ul>
</TD>
</Tr>
</Table>
</Form>

<Div align = "center">
Contact info: QQ: 492006183
MSN: zhang-lizhi@hotmail.com

</Div>
<SCRIPT type = "text/JavaScript">

Sortabledoubleul. INIT ()
</SCRIPT>
</Body>
</Html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More