基于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 面向对象编程(1) 基础
May 18 Javascript
jQuery 获取对象 基本选择与层级
May 31 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 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
色色整理的PHP面试题集锦
2012/03/08 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
python opencv实现证件照换底功能
2019/08/19 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
代码中finally中的代码会不会执行
2012/02/06 面试题
大学生思想汇报范文
2013/12/31 职场文书
开业典礼主持词
2014/03/21 职场文书
2014年终工作总结范本
2014/12/15 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
2015初中团委工作总结
2015/07/28 职场文书
团委副书记工作总结
2015/08/14 职场文书
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers