文档章节
Favour的个人空间 EASYUI
正文

17.EASYUI draggable组件
原

F
 Favour 发布于 2016/08/16 19:28
字数 1823
阅读 31
收藏 0
点赞 0
评论 0

做APP，小程序就上开源众包。世界杯期间免费领2600元启动金。 >>>   

一，基本拖拽组件

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Draggable - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>基本拖拽组件</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>点击鼠标拖动组件.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<div class="easyui-draggable" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc"></div>
	<div class="easyui-draggable" data-options="handle:'#title'" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc;margin-top:10px">
		<div id="title" style="padding:5px;background:#ccc;color:#fff">标题</div>
	</div>
</body>
</html>

二，拖拽限制

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Draggable - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>拖拽限制</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>拖拽对象只能在它的父容器中拖动.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<div style="position:relative;overflow:hidden;border:1px solid #ccc;width:500px;height:300px">
		<div class="easyui-draggable" data-options="onDrag:onDrag" style="width:100px;height:100px;background:#fafafa;border:1px solid #ccc;">
		</div>
	</div>
	<script>
		function onDrag(e){
			var d = e.data;
			if (d.left < 0){d.left = 0}
			if (d.top < 0){d.top = 0}
			if (d.left + $(d.target).outerWidth() > $(d.parent).width()){
				d.left = $(d.parent).width() - $(d.target).outerWidth();
			}
			if (d.top + $(d.target).outerHeight() > $(d.parent).height()){
				d.top = $(d.parent).height() - $(d.target).outerHeight();
			}
		}
	</script>

</body>
</html>

三，对齐拖拽

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Draggable - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>对齐拖拽</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>本示例展示如何将一个可拖拽对象拖到20*20的格子.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<div style="position:relative;overflow:hidden;border:1px solid #ccc;width:500px;height:300px">
		<div class="easyui-draggable" data-options="onDrag:onDrag" style="width:100px;height:100px;background:#fafafa;border:1px solid #ccc;">
		</div>
	</div>
	<script>
		function onDrag(e){
			var d = e.data;
			d.left = repair(d.left);
			d.top = repair(d.top);
			
			function repair(v){
				var r = parseInt(v/20)*20;
				if (Math.abs(v % 20) > 10){
					r += v > 0 ? 20 : -20;
				}
				return r;
			}
		}
	</script>

</body>
</html>

四，购物车

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Draggable - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head> 
  <body style="height:100%;">  
  <h2>购物车</h2>  
  <div class="easyui-panel" fit="true" border="false" style="height:100%;overflow:hidden">  
      <div class="cart">  
          <div class="ctitle">购物车</div>  
          <div style="background:#fff">  
          <table id="cartcontent" fitColumns="true" style="width1:300px;height:auto;">  
              <thead>  
                  <tr>  
                      <th field="name" width=140>商品名称</th>  
                      <th field="quantity" width=60 align="right">数量</th>  
                      <th field="price" width=60 align="right">价格</th>  
                  </tr>  
              </thead>  
          </table>  
          </div>  
          <div class="ctitle" style="position:absolute;bottom:40px">把商品拖到这里添加到购物车</div>  
      </div>  
      <div class="products">  
          <ul>  
              <li>  
                  <a href="#" class="item">  
                      <img src="images/shirt1.gif"/>  
                      <div>  
                          <p>气球</p>  
                          <p>价格:RMB25</p>  
                      </div>  
                  </a>  
              </li>  
              <li>  
                  <a href="#" class="item">  
                      <img src="images/shirt2.gif"/>  
                      <div>  
                          <p>心情</p>  
                          <p>价格:RMB25</p>  
                      </div>  
                  </a>  
              </li>  
              <li>  
                  <a href="#" class="item">  
                      <img src="images/shirt3.gif"/>  
                      <div>  
                          <p>大象</p>  
                          <p>价格:RMB25</p>  
                      </div>  
                  </a>  
              </li>  
              <li>  
                  <a href="#" class="item">  
                      <img src="images/shirt4.gif"/>  
                      <div>  
                          <p>涂鸦</p>  
                          <p>价格:RMB25</p>  
                      </div>  
                  </a>  
              </li>  
              <li>  
                  <a href="#" class="item">  
                      <img src="images/shirt5.gif"/>  
                      <div>  
                          <p>字母组合</p>  
                          <p>价格:RMB25</p>  
                      </div>  
                  </a>  
              </li>  
              <li>  
                  <a href="#" class="item">  
                      <img src="images/shirt6.gif"/>  
                      <div>  
                          <p>摇滚</p>  
                          <p>价格:RMB25</p>  
                      </div>  
                  </a>  
              </li>  
          </ul>  
      </div>  
  </div>  
    
      <style type="text/css">  
          .products{  
              overflow:auto;  
              height:100%;  
              background:#fafafa;  
          }  
          .products ul{  
              list-style:none;  
              margin:0;  
              padding:0px;  
          }  
          .products li{  
              display:inline;  
              float:left;  
              margin:10px;  
          }  
          .item{  
              display:block;  
              text-decoration:none;  
          }  
          .item img{  
              border:1px solid #333;  
          }  
          .item p{  
              margin:0;  
              font-weight:bold;  
              text-align:center;  
              color:#c3c3c3;  
          }  
          .cart{  
              float:right;  
              position:relative;  
              width:260px;  
              height:100%;  
              background:#ccc;  
              padding:0px 10px;  
          }  
          .ctitle{  
              text-align:center;  
              color:#555;  
              font-size:18px;  
              padding:10px;  
          }  
      </style>  
      <script>  
          $(function(){  
              $('#cartcontent').datagrid({  
                  singleSelect:true,  
                  showFooter:true  
              });  
              $('.item').draggable({  
                  revert:true,  
                  proxy:'clone',  
                  onStartDrag:function(){  
                      $(this).draggable('options').cursor = 'not-allowed';  
                      $(this).draggable('proxy').css('z-index',10);  
                  },  
                  onStopDrag:function(){  
                      $(this).draggable('options').cursor='move';  
                  }  
              });  
              $('.cart').droppable({  
                  onDragEnter:function(e,source){  
                      $(source).draggable('options').cursor='auto';  
                  },  
                  onDragLeave:function(e,source){  
                      $(source).draggable('options').cursor='not-allowed';  
                  },  
                  onDrop:function(e,source){  
                      var name = $(source).find('p:eq(0)').html();  
                      var price = $(source).find('p:eq(1)').html();  
                      addProduct(name, parseFloat(price.split('RMB')[1]));  
                  }  
              });  
          });  
            
          function addProduct(name,price){  
              var dg = $('#cartcontent');  
              var data = dg.datagrid('getData');  
              function add(){  
                  for(var i=0; i<data.total; i++){  
                      var row = data.rows[i];  
                      if (row.name == name){  
                          row.quantity += 1;  
                          return;  
                      }  
                  }  
                  data.total += 1;  
                  data.rows.push({  
                      name:name,  
                      quantity:1,  
                      price:price  
                  });  
              }  
              add();  
              dg.datagrid('loadData', data);  
              var cost = 0;  
              var rows = dg.datagrid('getRows');  
              for(var i=0; i<rows.length; i++){  
                  cost += rows[i].price*rows[i].quantity;  
              }  
              dg.datagrid('reloadFooter', [{name:'总计',price:cost}]);  
          }  
      </script>  
  </body>  
  </html>

五，学校课程表

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta charset="UTF-8">
		<title>Basic Draggable - jQuery EasyUI Demo</title>
		<link rel="stylesheet" type="text/css"
			href="../jquery-easyui-1.3.3/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css"
			href="../jquery-easyui-1.3.3/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../css/demo.css">
		<script type="text/javascript"
			src="../jquery-easyui-1.3.3/jquery.min.js"></script>
		<script type="text/javascript"
			src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
		<script type="text/javascript"
			src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
	</head>
	<body>
		<h2>
			创建一个学校课程表
		</h2>
		<div class="demo-info" style="margin-bottom: 10px">
			<div class="demo-tip icon-tip">
				&nbsp;
			</div>
			<div>
				点击拖一个课程到课程表里.
			</div>
		</div>

		<div style="width: 700px;">
			<div class="left">
				<table>
					<tr>
						<td>
							<div class="item">
								英语
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="item">
								科学
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="item">
								音乐
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="item">
								历史
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="item">
								计算机
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="item">
								数学
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="item">
								艺术
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="item">
								伦理学
							</div>
						</td>
					</tr>
				</table>
			</div>
			<div class="right">
				<table>
					<tr>
						<td class="blank"></td>
						<td class="title">
							星期一
						</td>
						<td class="title">
							星期二
						</td>
						<td class="title">
							星期三
						</td>
						<td class="title">
							星期四
						</td>
						<td class="title">
							星期五
						</td>
					</tr>
					<tr>
						<td class="time">
							08:00
						</td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
					</tr>
					<tr>
						<td class="time">
							09:00
						</td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
					</tr>
					<tr>
						<td class="time">
							10:00
						</td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
					</tr>
					<tr>
						<td class="time">
							11:00
						</td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
					</tr>
					<tr>
						<td class="time">
							12:00
						</td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
					</tr>
					<tr>
						<td class="time">
							13:00
						</td>
						<td class="lunch" colspan="5">
							午餐时间
						</td>
					</tr>
					<tr>
						<td class="time">
							14:00
						</td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
					</tr>
					<tr>
						<td class="time">
							15:00
						</td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
					</tr>
					<tr>
						<td class="time">
							16:00
						</td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
						<td class="drop"></td>
					</tr>
				</table>
			</div>
		</div>
		<style type="text/css">
.left {
	width: 120px;
	float: left;
}

.left table {
	background: #E0ECFF;
}

.left td {
	background: #eee;
}

.right {
	float: right;
	width: 570px;
}

.right table {
	background: #E0ECFF;
	width: 100%;
}

.right td {
	background: #fafafa;
	color: #444;
	text-align: center;
	padding: 2px;
}

.right td {
	background: #E0ECFF;
}

.right td.drop {
	background: #fafafa;
	width: 100px;
}

.right td.over {
	background: #FBEC88;
}

.item {
	text-align: center;
	border: 1px solid #499B33;
	background: #fafafa;
	color: #444;
	width: 100px;
}

.assigned {
	border: 1px solid #BC2A4D;
}
</style>
		<script>  
          $(function(){  
              $('.left .item').draggable({  
                  revert:true,  
                  proxy:'clone'  
              });  
              $('.right td.drop').droppable({  
                  onDragEnter:function(){  
                      $(this).addClass('over');  
                  },  
                  onDragLeave:function(){  
                      $(this).removeClass('over');  
                  },  
                  onDrop:function(e,source){  
                      $(this).removeClass('over');  
                      if ($(source).hasClass('assigned')){  
                          $(this).append(source);  
                      } else {  
                          var c = $(source).clone().addClass('assigned');  
                          $(this).empty().append(c);  
                          c.draggable({  
                              revert:true  
                          });  
                      }  
                  }  
              });  
          });  
      </script>
	</body>
</html>

 

© 著作权归作者所有

收藏
举报
共有 人打赏支持
F

Favour

粉丝 4
博文 185
码字总数 96673
作品 0
成都
程序员
相关文章 最新文章
jquery.ui.draggable中文文档jquery 自由拖拽类~study~

JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动. Draggable的元素受影响css: ui-draggable, 拖动过程中的css: ui-draggable-dragging. 如果需要的不仅仅是拖, 而是一个完整的拖放...

diydit ⋅ 2013/08/12 ⋅ 0

透视Ext JS 4类背后的机制与特点（上）

上次的资料中我们跟大家介绍了Ext JS 4 的类机制大概如何，主要围绕传统 OO 机制而设计，从而打算弥补了 Prototype 继承的不足。虽然性质上仍为模拟手段，但包含了比旧版本更为完整的 OO 特征...

sp42 ⋅ 2011/02/21 ⋅ 0

一个可拖拽的React标签组件

最近的项目里需要实现一个标签组件，内部标签可任意拖动排序。网上搜了一圈发现几乎没有现成的基于react的组件能很好的满足需求。 较为知名的是react-dnd，然而它似乎只支持把一个元素移到固...

YGYOOO ⋅ 05/28 ⋅ 0

Simpleframework组件与FreeMarker 整合例子

Simpleframework是基于后处理后处理模式技术实现的Web应用级开源框架。采用过滤器工作机制和申明式组件元数据定义，所以备整装零用的应 用模式，不仅可以支持Web应用的全程开发装，也可以在其...

simplesns ⋅ 2010/12/15 ⋅ 1

FLEX高级组件--flexlib

这是一套包含很多FLEX高级组件的开源类库。如果你觉得FLEX自带组件不够用或者觉得FLEX自带的组件功能太少，你可以下载FlexLib扩展。 FlexLib的开发成员: darron.schall, Doug McCune, Ted P...

匿名 ⋅ 2009/09/12 ⋅ 0

个人或小公司自己实现easyui拖拽开发架构

拖拽开发的两大要素是，被拖拽组件要有大小尺寸，同时又要能移动。除这两点之外还有组件的绘制器，要保证能够重新绘制。 1、拖拽和调整器：easyui都提供了控件即easyui-draggable和easyui-re...

快速开发师 ⋅ 2015/01/25 ⋅ 0

wiQuery

wiQuery是一个将 jQuery 与 jQuery UI 集成到Java Wicket Web开发框架中的开源项目。Wicket 框架提供了一种真正采用面向对象的方式来创建Web应用程序。wiQuery支持的jQuery UI组件包括： Ta...

匿名 ⋅ 2009/12/06 ⋅ 1

jQuery UI 1.8.20 发布

jQuery UI 1.8 的第 20 个维护版本发布了，该版本修复了 Datepicker, Draggable, and Sortable 等组件的 bug，详情请看 changelog. 下载地址： Development Bundle: http://jquery-ui.googl...

红薯 ⋅ 2012/05/01 ⋅ 2

jQuery UI draggable 拖动参数集合参考

使用jQuery UI这个js库可以很好的实现网页中元素的拖放效果，要想做出理想的拖放功能，了解它的参数设置即可，参数也很简单易懂。 下面的参数集合来自网上的文章，摘录过来以便使用。 官方介...

僵尸猫 ⋅ 2013/02/28 ⋅ 0

Extjs学习（1）：类，布局，容器和组件的概念

命名规范 //ClassesMyCompany.form.action.AutoLoadMyCompany.util.HtmlParser instead of MyCompary.parser.HTMLParser //Source FilesExt.form.action.Submit is stored in path/to/src/Ex......

储明城 ⋅ 2016/02/18 ⋅ 0

没有更多内容

加载失败，请刷新页面

加载更多

下一页

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网，发现zlbog-asp2.3版本已经进入测试阶段了，虽然正式版还没有发布，想必也不久了。那么作为aps纵横江湖十多年的今天，blog2.2版本应该已经成熟了，为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找，也称折半查找、二分搜索，是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始，如果中间元素正好是要查找的元素，则搜素过程结束；如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是，在X86项目中，可以使用__asm{}来嵌入汇编代码，但是在X64项目中，再也不能使用__asm{}来编写嵌入式汇编程序了，必须使用专门的.asm汇编文件来编写相应的汇编代码，然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源：用Java代码写了一个计算公式，包含除法和对数和取反，在页面上出现了-infinity，不知道这是什么问题，网上找答案才明白意思是负的无穷大。 思考：为什么会出现这种情况呢？这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码，后台解码

前台：encodeURI(sbzt) 后台：String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node，就不免得提到JavaScript。JavaScript自诞生以来，经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力，JavaScript不断被类聚和抽象，...

小草先森 ⋅ 昨天 ⋅ 0

Java桌球小游戏

其实算不上一个游戏，就是两张图片，不停的重画，改变ball图片的位置。一个左右直线碰撞的，一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败，请刷新页面

加载更多

下一页

删除文章

文章删除后无法恢复，确定取消删除此文章吗？

取消
确定
自荐文章

亲，自荐的博客将通过私信方式通知管理员，优秀的博客文章审核通过后将在博客推荐列表中显示

取消
确定
推荐文章

确定推荐此文章吗？

取消
确定
推荐博主

确定推荐此博主吗？

取消
确定
返回顶部
顶部