Directly run the Code:
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 xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> copy by dragging the mouse </title>
<Style>
Body {line-height: 150%}
. Show {display: block}
. Hide {display: none}
. Clone {position: absolute; border: 1px solid #666; background-color: # CCCCCC ;}
. Over {border: 1px solid #666 ;}
# Left {float: left; width: 200px; border: 1px solid #666 ;}
# Left li. selected {background-color: # CCCCCC}
# Right {margin-left: 220px; border: 1px solid #666 ;}
</Style>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<Script>
$ (Function (){
$ ("# Left li"). click (function (e ){
Var index = $ (this). index ();
$ ("# Left li"). removeClass ("selected ");
$ (This). addClass ("selected ");
$ ("# Right ul"). removeClass ('show ');
$ ("# Right ul"). addClass ('hide ');
$ ("# Right ul"). eq (index). removeClass ('hide ');
$ ("# Right ul"). eq (index). addClass ('show ');
});
$ ("# Left ul li"). mousemove (function (e ){
If ($ (this). attr ('class ')! = 'Selected' & $ (". clone"). length> 0)
{
$ (This). addClass ('over ');
}
});
$ ("# Left ul li"). mouseout (function (e ){
If ($ (this). attr ('class ')! = 'Selected ')
{
$ (This). removeClass ('over ');
}
});
$ ("# Left ul li"). mouseup (function (e ){
If ($ (this). attr ('class ')! = 'Selected' & $ (". clone"). length> 0)
{
Var index = $ (this). index ();
// $ ("# Right ul"). eq (index). prepend ($ (". clone "));
$ (". Clone"). appendTo ($ ("# right ul"). eq (index ));
$ (". Clone"). attr ('class ','');
}
});
$ ("# Right ul li"). mousedown (function (e) {// press the mouse to move the icon, clone the element, and determine the position of the new cloned Element
$ (This). clone (). addClass ("clone"). appendTo ($ ("body "));
$ ("Body" cmd.css ('cursor ', 'Move ');
$ (". Clone" cmd.css ('left', e. clientX + 1 );
$ (". Clone" cmd.css ('top', e. clientY + 1 );
});
$ (Document). mousemove (function (e ){
If ($ (". clone"). length> 0)
{
$ (". Clone" cmd.css ('left', e. clientX + 1 );
$ (". Clone" cmd.css ('top', e. clientY + 1 );
}
});
$ (Document). mouseup (function (e ){
$ (". Clone"). remove ();
$ ("Body" ).css ('cursor ', 'auto ');
});
});
</Script>
</Head>
<Body>
<Div id = "left">
<Ul>
<Li class = "selected"> group 1 </li>
<Li> group 2 </li>
<Li> group 3 </li>
</Ul>
</Div>
<Div id = "right">
<Ul class = "show">
<Li> 1 Name 1 </li>
<Li> 1 name 2 </li>
<Li> 1 Name 3 </li>
<Li> 1 name 4 </li>
<Li> 1 name 5 </li>
<Li> 1 Name 6 </li>
</Ul>
<Ul class = "hide">
<Li> 2 Name 1 </li>
<Li> 2 name 2 </li>
<Li> 2 Name 3 </li>
<Li> 2 name 4 </li>
<Li> 2 name 5 </li>
<Li> 2 Name 6 </li>
</Ul>
<Ul class = "hide">
<Li> 3 name 1 </li>
<Li> 3 name 2 </li>
<Li> 3 name 3 </li>
<Li> 3 name 4 </li>
<Li> 3 name 5 </li>
<Li> 3 name 6 </li>
</Ul>
</Div>
</Body>
</Html>