基于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