6、easyUI-拖放事件及应用
一、EasyUI 基本的拖动和放置
直接代码看：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>6、easyui 拖放</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script>
$(function(){
$("#dd1").draggable({
cursor:'pointer'//拖动时的CSS指针样式。
});
$("#dd2").draggable({
proxy:'clone'
});
$("#dd3").draggable({
proxy:function(source){
var p = $('<div class="proxy">proxy</div>');
p.appendTo('body');
return p;
}
});
$('#dds').draggable({
handle:'#titles' //开始拖动的句柄。
});
});
</script>
</head>
<body>
<div id="dd1" style="background: red;width:100px;height: 100px;" title="hhhh"></div>
<!--revert="true" 如果设置为true，在拖动停止时元素将返回起始位置。-->
<div id="dd2" style="background: black;width:100px;height: 100px;" revert="true"></div>
<div id="dd3" style="background: grey;width:100px;height: 100px;"></div>
<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>
<div id="dds" style="width:100px;height:100px;">
<div id="titles" style="background:#ccc;">title</div>
</div>
<a style="cursor: move;">2222</a>
</body>
</html>
二、购物车
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>6-1、easyui 购物车</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<style>
/*开始 第二步 设置拖动区样式*/
.products{
list-style:none;
margin-right:700px;
padding:0px;
height:100%;
}
.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{
position:fixed;
right:0;
top:0;
min-width:500px;
height:100%;
background:#ccc;
padding:0px 10px;
}
h1{
text-align:center;
color:#555;
}
h2{
position:absolute;
font-size:16px;
left:10px;
bottom:20px;
color:#555;
}
.total{
margin:0;
text-align:right;
padding-right:20px;
}
/*结束 第四步 设置放置区样式*/
</style>
<script>
var data = {"total":0,"rows":[]};
var totalCost = 0;
$(function(){
/**开始 第五步 设置放置区中table的属性及样式**/
$('#cartcontent').datagrid({//这段代码可以直接写在页面上 设置table clas="easyUI-datagrid" singleSelect="true" fitColumns="true"
singleSelect:true, //表格属性 如果为true，则只允许选择一行 不设置可以选择多行
//fitColumns:true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
//同列属性，但是这些列将会被冻结在左侧。
frozenColumns:[[
{field:'name',title:'name',width:100}
]] ,
//设置表头
columns:[[
{field:'quantity',title:'quantity',width:100,align:'right'},
{field:'price',title:'price',width:150,align:'right'} ,
{field:'mark',title:'mark',width:150,align:'right'} ,
{field:'mark2',title:'mark2',width:150,align:'right'}
]] ,
////调整列的位置，可用的值有：'left','right','both'。在使用'right'的时候用户可以通过拖动右侧边缘的列标题调整列 默认为right
resizeHandle:'both',
// striped:true,//默认是false 显示斑马线效果
rownumbers:true//显示一个行号默认不显示。
});
/**结束 第五步 设置放置区中table的属性及样式**/
/**开始 第六步 设置拖动区的效果以及触发事件**/
//拖动设置
$('.item').draggable({
revert:true,//如果设置为true，在拖动停止时元素将返回起始位置。默认为false
proxy:'clone',//在拖动的时候使用的代理元素，当使用'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({//设置在div的class属性为cart的区域内都被视为放置区
//在被拖拽元素到放置区内的时候触发，source参数表示被拖拽的DOM元素。
onDragEnter:function(e,source){
$(source).draggable('options').cursor='auto';//设置拖动的鼠标样式
},
//在被拖拽元素经过放置区的时候触发，source参数表示被拖拽的DOM元素
onDragOver:function(e,source){
$('.cart').css("background","#0088CC");//设置放置区背景色
},
//在被拖拽元素离开放置区的时候触发，source参数表示被拖拽的DOM元素。
onDragLeave:function(e,source){
$(source).draggable('options').cursor='not-allowed';//设置拖动的鼠标样式
$('.cart').css("background","#CCC");//设置拖动的离开放置区，放置区的背景色
},
//在被拖拽元素放入到放置区的时候触发，source参数表示被拖拽的DOM元素。
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('$')[1]));//调用添加商品方法
$('.cart').css("background","#CCC");//设置放入到放置区，放置区的背景色
}
});
/**结束 第七步 设置放置区的效果以及触发事件**/
});
//最后 添加物品方法函数
function addProduct(name,price){
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();
totalCost += price;
$('#cartcontent').datagrid('loadData', data);
$('div.cart .total').html('Total: $'+totalCost);
}
</script>
</head>
<body style="margin:0;padding:0;height:100%;background:#fafafa;">
<!--开始 第一步 拖动区设置-->
<ul class="products">
<li>
<a href="#" class="item">
<img src="../../../img/shirt1.gif"/>
<div>
<p>Balloon</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="../../../img/shirt2.gif"/>
<div>
<p>Feeling</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="../../../img/shirt3.gif"/>
<div>
<p>Elephant</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="../../../img/shirt4.gif"/>
<div>
<p>Stamps</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="../../../img/shirt5.gif"/>
<div>
<p>Monogram</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="../../../img/shirt6.gif"/>
<div>
<p>Rolling</p>
<p>Price:$25</p>
</div>
</a>
</li>
</ul>
<!--结束 第一步 拖动区设置-->
<!--开始 第三步 设置放置区table及区域-->
<div class="cart">
<h1>Shopping Cart</h1>
<div style="background:#fff">
<table id="cartcontent">
<thead>
<!--<tr>
<th field="name" width=140>Name</th>
<th field="quantity" width=60 align="right">Quantity</th>
<th field="price" width=60 align="right">Price</th>
</tr>-->
</thead>
</table>
</div>
<p class="total">Total: $0</p>
<h2>Drop here to add to cart</h2>
</div>
<!--结束 第三步 设置放置区table及区域-->
</body>
</html>
三、课程表
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>6-2、easyui 课程表</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<style>
.dragraera{
width: 120px;
float: left;
}
.dragraera table{
background:#E0ECFF;
}
.dragraera td{
background:#eee;
}
.item{
text-align:center;
border:1px solid #499B33;
background:#fafafa;
width:100px;
}
.right{
float:right;
width:600px;
}
.right table{
background:#E0ECFF;
width:100%;
}
.right td{
background:#fafafa;
text-align:center;
padding:2px;
}
.right td{
background:#E0ECFF;
}
.right td.drop{
background:#fafafa;
width:100px;
}
.right td.over{
background:#FBEC88;
}
.assigned{
border:1px solid #BC2A4D;
}
</style>
<script>
$(function(){
$(".dragraera .item").draggable({
revert:true,
proxy:'clone'
});
$(".right .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>
</head>
<body style="margin:0;padding:0;height:100%;background:#fafafa;">
<div style="width:750px;margin: 20px;">
<div class="dragraera">
<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>
<tr><td><div class="item">地理</div></td></tr>
</table>
</div>
<div class="right">
<table>
<tr>
<td class="blank"></td>
<td class="title">Monday</td>
<td class="title">Tuesday</td>
<td class="title">Wednesday</td>
<td class="title">Thursday</td>
<td class="title">Friday</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">Lunch</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>
</body>
</html>
/*
**author:EthanCoco
**sina:18720989539
**WeChat:dyznzyl
**Email:lijianlin0204@163.com
**欢迎收藏
*/
