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

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

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

第一个效果图:

拖动中:

拖动完成后:

代码实现:

<!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>

第二个实例:

效果图:

初始状态

拖动中:

拖动完成后

代码实现:

<!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="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="https://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常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

(0)

相关推荐

  • jQuery动态添加可拖动元素完整实例(附demo源码下载)

    本文实例讲述了jQuery动态添加可拖动元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: index.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type&

  • jQuery拖动元素并对元素进行重新排序

    本文实例讲述了jQuery拖动元素并对元素进行重新排序的实现方法,分享给大家供大家参考,具体实现内容如下 效果图: 具体内容如下: 从上图可以看出我们今天要实现的功能.当用户拖动一个图片时,就能改变图片的已有排序并更新表中的排列顺序.比如用户可以随意拖动我们网站中的布局,如谷歌iGoogle就已经实现了.这样便很好的提高了用户体验. 下边,我们一步一步来实现这个功能. <span id="show"> <div> <input id="check

  • jQuery 可以拖动的div实现代码 脚本之家修正版

    当然,代码使用起来也非常的方便,很多东西就不用自己再去琢磨了. 研究的过程中顺便用jQuery实现了一个div的拖动,代码附于本文结尾. 实现的思路请参考我的可以拖动的DIV(二)一文. 在参考jQuery中文网站中的例子时,我发现他们在div窗口标题栏触发click事件时,将div的位置移上了一些,而mouseup的事件注册在整个div窗口上,这个思路让我很受启发,解决了鼠标移动很快而div不能跟上导致的错误,非常好的解决办法. 另外,请注意事件起泡,在jQuery以及任何实现div拖动的js

  • jQuery拖动div、移动div、弹出层实现原理及示例

    代码演示: http://www.imqing.com/demo/movediv.html 大概原理: 使div的position为绝对定位absolute,然后控制其top与left值,需要监听鼠标事件,主要用到mousedown, mousemove, mouseup. 在mousedown后,记录mousedown时鼠标与需要移动的div的位置,然后取得两者之差,得到在鼠标移动后,div的位置.即: left = 当前鼠标位置.x - (鼠标点击时的.x值 - div的初始位置x值) to

  • jQuery实现DIV层淡入淡出拖动特效的方法

    本文实例讲述了jQuery实现DIV层淡入淡出拖动特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现DIV层淡入淡出的拖动效果)</title> <style type="text/css"> #div2 {     position:absolute;     width:400px;     height:300px;     border

  • jquery div拖动效果示例代码

    复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】

    本文实例讲述了jQuery实现的鼠标拖动浮层功能.分享给大家供大家参考,具体如下: 拖动浮层(div等任何标签) 之前项目做到一个弹出层需要一个拖动功能,上网上查了资料,发现很多方法,但是感觉都很繁琐,有的甚至没看懂.看了几个方法后发现基本上都是使用mousedown.mousemove和mouseup这三个函数来写的,然后就自己写了个移动div的方法. 先用mousedown来判断是否要开启移动,然后通过mousemove来获得移动的距离,实现移动:最后通过mouseup事件来判断移动结束了.

  • 利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值

    原来我们要写一个客户端的特效,要写一两天的JavaScript,然后再调试一两天,才可以看见端倪.现在我们只要使用JQuery和他的 plugin,就可以任意的实现我们脑海中的特效,感谢他们的编写者对人类的贡献(一百个西红柿砸过来..............). 我今天实现的需求是一个需要从列表页面中选择要导出到word中的列,然后在将选中列的内容导出到word中,同时为了增加通用性,列的个数不是固定的,也就是说这张表格可能是4列,也可能是5列,待选择的列数目不固定.例如:有下面的一张表格,然后

  • jquery实现可拖动DIV自定义保存到数据的实例

    看到一个不错的jquery插件,可拖动DIV,顺序可保存到数据库的一个实例:这里就以其中PHP实例简单说明一下: 复制代码 代码如下: <?php  //post到后台的数据      if ($_POST) {          $ids = $_POST["ids"];          for ($idx = 0; $idx < count($ids); $idx+=1) {              $id = $ids[$idx];              $o

  • jQuery实现Div拖动+键盘控制综合效果的方法

    本文实例讲述了jQuery实现Div拖动+键盘控制综合效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/199

  • jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现在又有了jquery让我们用,更方便了,本代码演示了在CSS代码.JavaScript代码和HTML三者结合的情况下,如何实现一个可关闭的弹出窗口,鼠标点击关闭按钮后将其关闭,然后会显示打开按钮,单击这个按钮即弹出这个层窗口. 运行效果截图如下: 在线演示地址如下: http://demo.jb51

  • jquery拖动改变div大小

    本文实例为大家分享了jquery拖动改变div大小的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery 版"元素拖拽改变大小"原型 </title> <script type="text/jav

随机推荐