基于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 相关文章推荐
奇妙的js
Sep 24 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
在vue项目中引入highcharts图表的方法
Jan 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
You might like
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
destoon官方标签大全
2014/06/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
js实现简单扫雷
2020/11/27 Javascript
MySQL最常见的操作语句小结
2015/05/07 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
Python如何输出整数
2020/06/07 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
UNIX特点都有哪些
2016/04/05 面试题
工厂标语大全
2014/10/06 职场文书
单位委托书
2014/10/15 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS