`

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/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>物品栏拖拽--Drag and Drop</title>
<meta name="description" content="物品栏拖拽,拖放" />
<meta name="keywords" content="物品栏拖拽,拖放" />
<style type="text/css">
*{margin:0;padding:0;}
body{font:12px Verdana, Arial, "宋体", sans-serif;}
h1{font-size: 18px;font-family: 微软雅黑;font-weight:normal;}
h2{clear:both;font-size: 16px;margin: 0;padding: 5px;border-bottom: 1px solid #69c;color: #1a1;font-family: 微软雅黑;font-weight:normal;}
h3{margin: 0;font-size: 14px;font-family: 微软雅黑;font-weight:normal;}
p{clear:both;}
.author{position:fixed;_position: absolute;right:20px;top:20px;}
ul{clear:both;float: left;}
/*格子拖放*/
.grid li{float: left;list-style: none;width: 98px;height: 86px;border: 1px solid #ccc;background: #eee;margin: 5px;padding: 1px;-moz-user-select:none;text-align:center;}

.grid img{width:98px;height: 68px;padding-bottom:4px;}
.grid div{position: relative;}
.grid span{position: absolute;right:1px;top:75%;color: #fff;}
/*交换数据用的DIV*/
#tempBox{position: absolute;z-index:9999;}
/*单个拖放demo*/
/*#test{clear:both;width: 500px;margin: 30px;padding: 10px;line-height: 24px;background: #ccc;}*/
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
</head>
<body>

	<div style="padding:50px;">
	<h1>拖放,拖拽,仿物品栏拖拽，请点击 << <a href="javascript:void(0);" onclick="startDrag()" >开始拖动</a> >> </h1>

  <div style="width:68%;float:left;">
        <h2>酷站推荐 &nbsp;&nbsp;
        <a href="javascript:void(0);" onclick="addRow()" >添加一行</a>&nbsp;&nbsp;

        <a href="javascript:void(0);" onclick="startDrag()" >开始拖动</a>
        </h2>

        <div id="item" style="margin-left:0px;">

          <ul class="drop grid" id="g1">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
          </ul>

        </div>
    </div>


    <div style="width:600px;float:left;">
        <h2>已选中网站</h2>
        <ul class="drag grid">
            <li id="1"><div><img src="http://img1.cache.netease.com/img09/logo/logo.gif" alt="" width="175" height="50" title="" />网易</div>
          </li>
            <li id="2"><div><img src="http://mat1.qq.com/www/iskin/skin4/expotclogo.gif" alt="" width="100" height="45" title="" />腾讯</div>
          </li>
            <li id="3"><div><img src="http://i1.sinaimg.cn/home/deco/2009/0330/logo_home.gif" alt="" title="" />新浪</div>
          </li>
            <li id="4"><div><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="" title="" />谷歌</div>
          </li>
            <li id="5"><div><img src="http://www.it86.cc/uploads/allimg/c090630/12463QO5220-1J360.jpg" alt="" title="" />搜狐</div>
          </li>
            <li id="6"><div><img src="http://www.baidu.com/img/baidu_logo.gif" alt="" title="" />百度</div>
          </li>
            <li id="7"><div><img src="http://cn.yimg.com/hp/0910/img/yahoo_logo2.gif" alt="" title="" />雅虎</div>
          </li>
          <li id="8">
              <div><img src="http://assets.taobaocdn.com/img/chl/fp/logo080808.png" alt="" title="" />淘宝网</div>
          </li>
		  <li id="8">
              <div><img src="http://storage.aliyun.com/tizhimei/pins/405_m.jpg" alt="" title="" />淘宝网</div>
          </li>
		  <li id="8">
              <div><img src="http://storage.aliyun.com/tizhimei/pins/247_s.jpg" alt="" title="" />淘宝网</div>
          </li>
        </ul>
    </div>

 	</div>
	
	<script type="text/javascript">
	var r=null;
	window.onload=function()
	{
		r=document.getElementById('item').innerHTML;		
	}

	function addRow() {
		var obj=document.getElementById('item')
		obj.innerHTML=obj.innerHTML+r;
	}
	

	function startDrag()
	{
		//.drag li 里面的元素对应的放置位置是 .drop li, 完成后回调change函数,默认限制拖动范围是窗口内部
		$('.drag li').Drag({drop:'.drop li,.drag li',finish:change});
		//.drag li 里面的元素对应的放置位置是 .drop li和.drag li(自身), 完成后回调change函数,默认限制拖动范围是窗口内部
		$('.drop li').Drag({drop:'.drop li, .drag li',finish:change});
		//document.getElementById('ravl').value=document.getElementById('item').innerHTML;
	}
	<!--
	//拖放插件DragDrop
	$.fn.Drag=function (options) {
		var defaults={
			limit : window,//是否限制拖放范围,默认限制当前窗口内
			drop:false,//是否drop
			handle:false,//拖动手柄
			finish:function () {}//回调函数
		};
		var options=$.extend(defaults,options);
		this.X=0;//初始位置
		this.Y=0;
		this.dx=0;//位置差值
		this.dy=0;
		var This=this;
		var ThisO=$(this);//被拖目标
		var thatO;
		if (options.drop) {
			var ThatO=$(options.drop);//可放下位置
			ThisO.find('div').css({cursor:'move'});
			var tempBox=$('<div id="tempBox" class="grid"></div>');
		}else {
			options.handle ? ThisO.find(options.handle).css({cursor:'move','-moz-user-select':'none'}) : ThisO.css({cursor:'move','-moz-user-select':'none'});
		}
		//拖动开始
		this.dragStart=function (e) {
			var cX=e.pageX;
			var cY=e.pageY;
			if (options.drop) {
				ThisO=$(this);
				if (ThisO.find('div').length!=1) {return}//如果没有拖动对象就返回
				This.X=ThisO.find('div').offset().left;
				This.Y=ThisO.find('div').offset().top;
				tempBox.html(ThisO.html());
				ThisO.html('');
				$('body').append(tempBox);
				tempBox.css({left:This.X,top:This.Y});
			}else {
				This.X=ThisO.offset().left;
				This.Y=ThisO.offset().top;
				ThisO.css({margin:0})
			}
			This.dx=cX-This.X;
			This.dy=cY-This.Y;
			if (!options.drop) {ThisO.css({position:'absolute',left:This.X,top:This.Y})}
			$(document).mousemove(This.dragMove);
			$(document).mouseup(This.dragStop);
			if ($.browser.msie) {ThisO[0].setCapture();}//IE,鼠标移到窗口外面也能释放
		}
		//拖动中
		this.dragMove=function (e) {
			var cX=e.pageX;
			var cY=e.pageY;
			if (options.limit) {//限制拖动范围
				
				//容器的尺寸
				var L=$(options.limit)[0].offsetLeft ? $(options.limit).offset().left : 0;
				var T=$(options.limit)[0].offsetTop ? $(options.limit).offset().top : 0;
				var R=L+$(options.limit).width();
				var B=T+$(options.limit).height();
				//获取拖动范围
				var iLeft=cX-This.dx, iTop=cY-This.dy;
				//获取超出长度
				var iRight=iLeft+parseInt(ThisO.innerWidth())-R, iBottom=iTop+parseInt(ThisO.innerHeight())-B;
				//alert($(window).height())
				//先设置右下, 再设置左上
				if(iRight > 0) iLeft -= iRight;
					
				if(iBottom > 0) iTop -= iBottom;
				if(L > iLeft) iLeft = L;
				if(T > iTop) iTop = T;
				if (options.drop) {
					tempBox.css({left:iLeft,top:iTop})
				}else {
					ThisO.css({left : iLeft,top : iTop})
				}
			}else {
				//不限制范围
				if (options.drop) {
					tempBox.css({left:cX-This.dx,top:cY-This.dy})
				}else {
					ThisO.css({left:cX-This.dx,top:cY-This.dy});
				}
			}
			
		}
		//拖动结束
		this.dragStop=function (e) {
			if (options.drop) {
				var flag=false;
				var cX=e.pageX;
				var cY=e.pageY;
				var oLf=ThisO.offset().left;
				
				var oRt=oLf+ThisO.width();
				var oTp=ThisO.offset().top;
				var oBt=oTp+ThisO.height();
				if (!(cX>oLf && cX<oRt && cY>oTp && cY<oBt)) {//如果不是在原位
					for (var i=0; i<ThatO.length; i++) {
						var XL=$(ThatO[i]).offset().left;
						var XR=XL+$(ThatO[i]).width();
						var YL=$(ThatO[i]).offset().top;
						var YR=YL+$(ThatO[i]).height();
						if (XL<cX && cX<XR && YL<cY && cY<YR) {//找到拖放目标 交换位置
							var newElm=$(ThatO[i]).html();
							$(ThatO[i]).html(tempBox.html());
							ThisO.html(newElm);
							thatO=$(ThatO[i]);
							tempBox.remove();
							flag=true;
							break;//一旦找到 就终止循环
						}
					}
				}
				if (!flag) {//如果找不到拖放位置,归回原位
					tempBox.css({left:This.X,top:This.Y});
					ThisO.html(tempBox.html());
					tempBox.remove();
				}
			}
			$(document).unbind('mousemove');
			$(document).unbind('mouseup');
			options.finish(e,ThisO,thatO);
			if ($.browser.msie) {ThisO[0].releaseCapture();}
		}
		//绑定拖动
		options.handle ? ThisO.find(options.handle).mousedown(This.dragStart) : ThisO.mousedown(This.dragStart);
		
		//IE禁止选中文本
		//document.body.onselectstart=function(){return false;}
	}
	//下面是例子
	//.drag li 里面的元素对应的放置位置是 .drop li, 完成后回调change函数,默认限制拖动范围是窗口内部
	//$('.drag li').Drag({drop:'.drop li',finish:change});
	//.drag li 里面的元素对应的放置位置是 .drop li和.drag li(自身), 完成后回调change函数,默认限制拖动范围是窗口内部
	//$('.drop li').Drag({drop:'.drop li, .drag li',finish:change});
	//$('#test').Drag({handle:'h2',finish:change});//不限制拖动范围 可设置limit:false
	var change=function (e,oldElm,newElm) {
		//alert(newElm)
	}
	//-->
	</script>
</body>
</html>
 
分享到：
| 75道逻辑题及答案（1—15）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Jquery Sortable实现div拖动排序效果

    这里，我们设置了几个关键的配置选项，例如`revert`使得拖动结束后元素回到原位置，`cursor`改变了鼠标指针的样式，以及`tolerance`决定了元素何时可以交换位置。 为了保存排序后的顺序，可以监听Sortable的`stop`...

    jquery+ajax实现鼠标拖拽图片位置交换

    总结，通过结合jQuery UI的拖放功能、CSS样式和Ajax通信，我们可以实现拖拽图片并交换它们在页面上的位置。在拖放过程中，用户可以直观地调整图片顺序，同时后台（如数据库）也能同步更新这些变化。这种交互方式提高...

    Jquery拖拽Div层排序8中拖拽效果

    《jQuery实现Div层排序的八种拖拽效果详解》 在网页开发中，动态交互功能是提升用户体验的重要手段，而Div层的拖拽排序就是其中之一。jQuery作为一个强大的JavaScript库，提供了丰富的API和插件，使得实现Div拖拽...

    页面div拖动交换位置，动态添加删除页面元素

    总的来说，这个项目通过JavaScript和jQuery UI实现了页面`div`元素的拖动交换位置功能，使得用户可以通过直观的拖放操作来改变元素顺序。同时，配合自定义的JavaScript函数，用户还可以动态地添加和删除页面元素，...

    JQ实现DIV大小、位置拖动调整源码

    这个“JQ实现DIV大小、位置拖动调整源码”是一个基于jQuery的解决方案，它使得开发者能够为网页上的&lt;div&gt;元素添加动态的拖放功能，提升用户体验。 jQuery（简称JQ）是一个轻量级的JavaScript库，它简化了HTML文档...

    jQuery鼠标拖动div层排序代码

    在本文中，我们将深入探讨如何使用jQuery实现一个简单的鼠标拖动div层进行排序的功能。这个功能允许用户通过鼠标操作，自由地改变div容器内li元素的排列顺序，从而提供更直观和互动的用户体验。 首先，我们需要理解...

    div 拖动改变位置

    在网页设计和开发中，"div 拖动 交换位置"是一个常见的交互功能，它允许用户通过拖动页面上的 div 元素来改变它们的位置，实现动态布局。这一功能通常涉及HTML、CSS以及JavaScript（可能包括jQuery或其他库）等技术...

    jQuery 实现DOM元素拖拽交换位置的实例代码

    ### jQuery 实现 DOM 元素拖拽交换位置的原理和技术点 在网页中实现 DOM 元素的拖拽功能能够让用户通过直观的方式进行元素的排序、移动等操作，从而提升网站的交互性和用户体验。本文介绍利用 jQuery 库来实现 DOM ...

    jquery 拖动.rar

    一旦拖放结束，可以执行交换位置、删除原有位置并返回备选区域等操作。 4. **自定义配置**：为了满足不同的需求，例如调整表格大小，开发者可能引入了额外的逻辑。这可能涉及到监听表格单元格的拖动，动态计算新的...

    jquery 跨iframe拖拽

    2. **设置拖拽元素**：在主页面或者IFrame中的某个元素（比如一个div）上，我们需要应用`.draggable()`方法，定义拖动行为。例如： ```javascript $('#draggableElement').draggable(); ``` 这将使`#...

    Asp.net+JQuery拖拽布局并保存至数据库

    标题 "Asp.net+JQuery拖拽布局并保存至数据库" 涉及的技术领域主要集中在Web开发，尤其是客户端交互和后端数据处理。这里我们将深入探讨如何利用JQuery实现拖拽布局，以及如何将这种布局信息存储到Asp.net应用程序的...

    jquery.dad.js div拖拽排序,及bug优化

    在拖拽排序的过程中，`jquery.dad.js`首先会为每个可拖动的`div`元素添加必要的CSS类和数据属性，以便识别和管理它们。`jquery.dad.css`文件则提供了这些元素的样式规则，确保在拖动过程中视觉效果的平滑过渡。例如...

    使用jQuery实现两个div中按钮互换位置的实例代码

    在本文中，我们将深入探讨如何使用jQuery来实现两个div中按钮的互换位置功能。这个实例对于理解jQuery的DOM操作和事件处理具有很好的实践意义。首先，我们需要了解jQuery库的基本用法，它是一个轻量级的JavaScript库...

    Ajax实现div拖拽

    - 当div被拖动到新的位置后，我们可能希望保存这个位置信息。这时可以使用Ajax发送一个请求到服务器。 - 创建一个新的XMLHttpRequest对象，这是Ajax的核心组件，用于与服务器通信。 - 编写`send()`方法的参数，...

    jquery拖拽案例

    需要注意的是，这个案例适用于简单的元素拖动，对于复杂的拖放场景，例如多元素拖放、拖放交换位置等，可能需要借助jQuery UI库中的`draggable`和`droppable`组件。这些组件提供了更完善的拖放功能，如碰撞检测、...

    jquery框架下的页面内元素拖动，内容互换

    本篇文章将详细讲解如何利用jQuery实现页面内的元素拖动以及内容互换的功能。 首先，我们需要引入jQuery库。这通常通过在HTML文件中添加一个`&lt;script&gt;`标签来完成，确保其在所有依赖于jQuery的代码之前加载。例如：...

    ajax-div拖拽效果

    1. 模态框拖动：在弹出的模态框（通常是一个Div）中，允许用户通过拖拽改变其位置，提高用户体验。 2. 可拖动小部件：在网站侧边栏或首页，可将小部件（如天气、新闻等）设置为可拖动，用户可以根据个人喜好调整布局...

    jquery实现拖拽效果

    本文将深入探讨如何使用jQuery实现拖拽效果，这是网页交互设计中的一个常见功能，通常用于创建可自定义布局的元素，如拖动窗口或调整元素位置。 首先，jQuery UI库提供了一个内置的`draggable()`方法，使得实现拖拽...

    jQuery弹出可拖动层

    4. **Ajax交互**（AJAX，异步JavaScript和XML）：jQuery封装了Ajax请求，使得无需深入了解底层XMLHttpRequest对象，即可轻松实现页面与服务器的数据交换。这对于动态更新弹出层内容非常有用。 5. **jQuery插件**：...

    3个仿igoogle拖动DIV层的完整示例

    5. **Ajax应用**：在"Ajax仿iGoogle双击编辑-网页拖动完整实例"中，可能用到了Ajax（Asynchronous JavaScript and XML）技术，用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。这在igoogle这样的...

Magicbox
Global site tag (gtag.js) - Google Analytics