基于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 相关文章推荐
Javascript入门学习资料收集整理篇
Jul 06 Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 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
You might like
第二节 对象模型 [2]
2006/10/09 PHP
php基础知识:类与对象(5) static
2006/12/13 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
JS异步处理的进化史深入讲解
2019/08/25 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
美国著名手表网站:Timepiece
2017/11/15 全球购物
附答案的Java面试题
2012/11/19 面试题
C#实现启动一个进程
2016/10/01 面试题
医学生实习自荐信
2013/10/01 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
小学新课改心得体会
2016/01/22 职场文书
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android