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插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jQuery实现简单评论区功能
Oct 26 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函数,php爱好者站推荐
2007/03/19 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
php模板引擎技术简单实现
2016/03/15 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
采用call方式实现js继承
2014/05/20 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
几种tab切换详解
2017/02/03 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Python类的用法实例浅析
2015/05/27 Python
Django返回json数据用法示例
2016/09/18 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
python实现微信小程序自动回复
2018/09/10 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
简历中个人求职的自我评价模板
2013/11/29 职场文书
年会活动策划方案
2014/01/23 职场文书
施工安全责任书范本
2014/07/24 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
Python中time与datetime模块使用方法详解
2022/03/31 Python