17.EASYUI draggable组件
博客专区 > Favour 的博客 > 博客详情
17.EASYUI draggable组件
Favour 发表于1年前
17.EASYUI draggable组件
  • 发表于 1年前
  • 阅读 24
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

一,基本拖拽组件

<%@ 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>

 

共有 人打赏支持
粉丝 5
博文 182
码字总数 96186
×
Favour
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: