编程 Javascript

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

Posted in Javascript onAugust 23, 2011

直接上代码：

<!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>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

自己开发Dojo的建议框架

Sep 24 Javascript

一个javascript图片阅览组件

Nov 09 Javascript

window.dialogArguments 使用说明

Apr 11 Javascript

js新闻滚动 js如何实现新闻滚动效果

Jan 07 Javascript

javascript中innerText和innerHTML属性用法实例分析

May 13 Javascript

javascript搜索框效果实现方法

May 14 Javascript

关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

Jun 30 Javascript

JS重载实现方法分析

Dec 16 Javascript

JavaScript requestAnimationFrame动画详解

Sep 14 Javascript

anime.js 实现带有描边动画效果的复选框（推荐）

Dec 24 Javascript

JS实现给数组对象排序的方法分析

Jun 24 Javascript

探索浏览器页面关闭window.close()的使用详解

Aug 21 Javascript

一些有用的JavaScript和jQuery的片段分享

Aug 23 #Javascript

Fastest way to build an HTML string(拼装html字符串的最快方法)

Aug 20 #Javascript

jQuery最佳实践完整篇

Aug 20 #Javascript

jQuery的deferred对象使用详解

Aug 20 #Javascript

优化innerHTML操作(提高代码执行效率)

Aug 20 #Javascript

js中将URL中的参数提取出来作为对象的实现代码

Aug 16 #Javascript

兼容IE和Firefox的javascript获取iframe文档内容的函数

Aug 15 #Javascript