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

更新时间：2011年08月23日 19:46:11 作者：

基于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快速解决IE输入框不能输入的问题
下面小编就为大家带来一篇用jquery快速解决IE输入框不能输入的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
jQuery选择器中的特殊符号处理方法
一般情况下，在jQuery选择器中，我们很少会用到诸如“.”、“#”、“(”、“[”等特殊字符，但是在实际应用中，偶尔也会遇到表达式中含有“#”和“.”等特殊字符,那么是如何处理这些个特殊字符的呢？下面小编给大家介绍下
2017-09-09
php跨域调用json的例子
本文简单说明php用json如何跨域调用，一个小例子，大家看一下就明白
2013-11-11
jQuery使用$.ajax进行即时验证的方法
这篇文章主要介绍了jQuery使用$.ajax进行即时验证的方法,较为详细的分析了jQuery基于ajax实现前台验证与后台数据交互的相关技巧,非常简单实用,需要的朋友可以参考下
2015-12-12
jquery中获取select选中值的代码
jquery中获取select选中值的代码，需要的朋友可以参考下。
2011-06-06
为指定的元素添加遮罩层的示例代码
遮罩在某些情况下还是比较实用的，下面为大家介绍下如何为指定的元素添加遮罩层，感兴趣的朋友可以了解下
2014-01-01
layui导航栏实现代码
这篇文章主要为大家详细介绍了layui导航栏效果的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
使用jquery为table动态添加行的实现代码
最近，有需要做一个动态的给table，添加行，用了点时间，算是做成了。已测试过，但如果发现有什么bug，可以留言，欢迎拍砖。大家一起进步。
2011-03-03
jQuery之Deferred对象详解
这篇文章主要介绍了jQuery之Deferred对象详解,本文深入剖析了jQuery Deferred对象的方法属性等内容,需要的朋友可以参考下
2014-09-09
jQuery版AJAX简易封装代码
这篇文章主要为大家详细介绍了jQuery版AJAX简易封装代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09