jquery实现两个div中的元素相互拖动的方法分析


Posted in jQuery onApril 05, 2020

本文实例讲述了jquery实现两个div中的元素相互拖动的方法。分享给大家供大家参考,具体如下:

这里写了两个实例,两个都是基于jquery实现的。如果有更好的方法,欢迎分享。

第一个效果图:

拖动中:

jquery实现两个div中的元素相互拖动的方法分析

拖动完成后:

jquery实现两个div中的元素相互拖动的方法分析

代码实现:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.css" rel="external nofollow" >
		<script src="js/jquery.js"></script>
		<script src="jquery-ui-1.11.4/jquery-ui.js"></script>
		<script>
			function fun(){
				$(".aaa p").draggable({
					helper: "clone",
				});
			}
			$(function() {
				fun();
				$(".aaa").droppable({
					activeClass: "ui-state-default",
					drop: function(event, ui) {
						$("<p class='ui-draggable'></p>").text(ui.draggable.text()).appendTo(this);
						var item = ui.draggable;
						item.remove();
						fun();
					}
				})
			});
		</script>
	</head>
 
	<body>
		<div id="catalog">
			<div class="aaa" id="cart2" style="width: 400px; height: 400px; border: 1px solid red; float: left;">
				<p>123</p>
				<p>123</p>
				<p>123</p>
			</div>
	
			<div class="aaa" id="cart" style="width: 400px; height: 400px; border: 1px solid red; float: left;">
				<p>234</p>
				<p>234</p>
				<p>234</p>
				<p>234</p>
			</div>
			
			<div class="aaa" id="cart1" style="width: 400px; height: 400px; border: 1px solid red; float: left;">
				<p>345</p>
				<p>345</p>
				<p>345</p>
				<p>345</p>
			</div>
		</div>
	</body>
 
</html>

第二个实例:

效果图:

初始状态

jquery实现两个div中的元素相互拖动的方法分析

拖动中:

jquery实现两个div中的元素相互拖动的方法分析

拖动完成后

jquery实现两个div中的元素相互拖动的方法分析

代码实现:

<!doctype html>
<html>
 
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css" rel="external nofollow" >
		<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
		<style>
			#sortable {
				list-style-type: none;
				margin: 0;
				padding: 0;
				width: 60%;
			}
			
			#sortable li {
				margin: 0 3px 3px 3px;
				padding: 0.4em;
				padding-left: 1.5em;
				font-size: 1.4em;
				height: 18px;
			}
			
			#sortable li span {
				position: absolute;
				margin-left: -1.3em;
			}
		</style>
		<script>
			$(function() {
				$("#sortable").sortable();
				$("#sortable").disableSelection();
			});
		</script>
	</head>
 
	<body>
 
		<ul id="sortable">
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
		</ul>
 
	</body>
 
</html>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 #jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 #jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 #jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 #jQuery
jQuery实现html可联动的百分比进度条
Mar 26 #jQuery
jquery css实现流程进度条
Mar 26 #jQuery
jquery实现上传文件进度条
Mar 26 #jQuery
You might like
php+oracle 分页类
2006/10/09 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
PHP attributes()函数讲解
2019/02/03 PHP
prototype1.4中文手册
2006/09/22 Javascript
greybox——不开新窗口看新的网页
2007/02/20 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
Vue实现简易计算器
2020/02/25 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
2014年教师党员自我评议
2014/09/19 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
k-means & DBSCAN 总结
2021/04/27 Python