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实现二级联动效果
Mar 30 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
DOM精简教程
2006/10/03 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python 闭包的使用方法
2017/09/07 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
销售简历自我评价
2014/01/24 职场文书
社区创先争优承诺书
2014/08/30 职场文书
材料物理专业求职信
2014/09/01 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
见习期个人总结
2015/03/05 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
生产现场禁烟通知
2015/04/23 职场文书
学校工会工作总结2015
2015/05/19 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏