jquery 实现鼠标拖拽元素复制并写入效果

直接上代码：
<!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>鼠标拖拽复制效果</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) {//鼠标按下，鼠标变移动标志，克隆元素，并确定新克隆元素位置
        $(this).clone().addClass("clone").appendTo($("body"));
        $("body").css('cursor','move');
        $(".clone").css('left',e.clientX+1);
        $(".clone").css('top',e.clientY+1);
        
    });
    $(document).mousemove(function(e){
        if($(".clone").length>0)
        {
            $(".clone").css('left',e.clientX+1);
            $(".clone").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">组一</li>
        <li>组2</li>
        <li>组3</li>
    </ul>
</div>
<div id="right">
    <ul class="show">
        <li>1姓名一</li>
        <li>1姓名2</li>
        <li>1姓名3</li>
        <li>1姓名4</li>
        <li>1姓名5</li>
        <li>1姓名6</li>
    </ul>
    <ul class="hide">
        <li>2姓名一</li>
        <li>2姓名2</li>
        <li>2姓名3</li>
        <li>2姓名4</li>
        <li>2姓名5</li>
        <li>2姓名6</li>
    </ul>
    <ul class="hide">
        <li>3姓名一</li>
        <li>3姓名2</li>
        <li>3姓名3</li>
        <li>3姓名4</li>
        <li>3姓名5</li>
        <li>3姓名6</li>
    </ul>
</div>
</body>
</html>
jquery 实现 鼠标拖拽元素复制并写入效果

jquery 实现鼠标拖拽元素复制并写入效果
