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操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jQuery冲突问题解决方法
Jan 19 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边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
python线程池的实现实例
2013/11/18 Python
使用python实现strcmp函数功能示例
2014/03/25 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python如何存储数据到json文件
2020/03/09 Python
详解python tcp编程
2020/08/24 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
室内拓展活动方案
2014/02/13 职场文书
学校联谊协议书
2014/09/16 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
PHP实现两种排课方式
2021/06/26 PHP
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs