Copy and write effect of mouse dragging elements based on jquery_jquery

直接上代码：

复制代码 代码如下:

<script> <br>$(function(){ <br>$("#left li").click(function(e) { <br>var index=$(this).index(); <br>$("#left li").removeClass("selected"); <br>$(this).addClass("selected"); <br>$("#right ul").removeClass('show'); <br>$("#right ul").addClass('hide'); <br>$("#right ul").eq(index).removeClass('hide'); <br>$("#right ul").eq(index).addClass('show'); <br>}); <br><br><br>$("#left ul li").mousemove(function(e) { <br>if($(this).attr('class')!='selected'&&$(".clone").length>0) <br>{ <br>$(this).addClass('over'); <br>} <br>}); <br>$("#left ul li").mouseout(function(e) { <br>if($(this).attr('class')!='selected') <br>{ <br>$(this).removeClass('over'); <br>} <br>}); <br>$("#left ul li").mouseup(function(e) { <br>if($(this).attr('class')!='selected'&&$(".clone").length>0) <br>{ <br>var index=$(this).index(); <br>//$("#right ul").eq(index).prepend($(".clone")); <br>$(".clone").appendTo($("#right ul").eq(index)); <br>$(".clone").attr('class',''); <br>} <br>}); <br>$("#right ul li").mousedown(function(e) {//鼠标按下，鼠标变移动标志，克隆元素，并确定新克隆元素位置 <br>$(this).clone().addClass("clone").appendTo($("body")); <br>$("body").css('cursor','move'); <br>$(".clone").css('left',e.clientX 1); <br>$(".clone").css('top',e.clientY 1); <br><br>}); <br>$(document).mousemove(function(e){ <br>if($(".clone").length>0) <br>{ <br>$(".clone").css('left',e.clientX 1); <br>$(".clone").css('top',e.clientY 1); <br>} <br>}); <br>$(document).mouseup(function(e){ <br>$(".clone").remove(); <br>$("body").css('cursor','auto'); <br>}); <br>}); <br></script>

• 组一


• 组2


• 组3

• 1姓名一


• 1姓名2


• 1姓名3


• 1姓名4


• 1姓名5


• 1姓名6

• 2姓名一


• 2姓名2


• 2姓名3


• 2姓名4


• 2姓名5


• 2姓名6

• 3姓名一


• 3姓名2


• 3姓名3


• 3姓名4


• 3姓名5


• 3姓名6