一，基本拖拽组件
<%@ 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">
</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>
© 著作权归作者所有
