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程序设计有所帮助。
相关推荐
-
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