EasyUI ---- draggable购物车
@{
ViewBag.Title = "Easyui_draggable";
Layout = "~/Views/Shared/Layouts.cshtml";
}
<style type="text/css">
.products{
overflow:auto;
height:%;
background:#fafafa;
}
.products ul{
list-style:none;
margin:;
padding:;
}
.products li{
display:inline;
float:left;
margin:10px;
border:1px solid #ff0000;
}
.item{
display:block;
text-decoration:none;
}
.item img{
width:100px;
height:100px;
}
.cart {
height:1000px;
width:300px;
float:right;
}
</style>
<script type="text/javascript">
$(function () {
$("#cartcontent").datagrid({
singleSelect:true,//单行选中
showFooter:true//显示页脚
});
})
$(".item").draggable({
revert: true,//如何使true,在拖动的元素会返回到其实位置
proxy: 'clone',//clone时,会复制一个元素
onStartDrag: function () {
$(this).draggable('options').cursor = 'not-allowed';
$(this).draggable('proxy').css('z-index', );
},
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')[]));
}
});
function addProduct(name,price) {
var dg = $("#cartcontent");
var data = dg.datagrid('getData');
function add() {
for (var i = ; i < data.total; i++) {
var row = data.rows[i];
if (row.name == name) {
row.quantity += ;
return;
}
}
data.total += ;
data.rows.push({
name: name,
quantity: ,
price:price
});
}
add();
dg.datagrid('loadData', data);
var cost = ;
var rows = dg.datagrid('getRows');
for (var i = ; i < rows.length; i++) {
cost += rows[i].price * rows[i].quantity;
}
dg.datagrid('reloadFooter', [{ name: '总计', price: cost }]);
}
</script>
<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="width:250px; height:auto;">
<thead>
<th field="name" width="">商品名称</th>
<th field="quantity" width="">数量</th>
<th field="price" width="">价格</th>
</thead>
</table>
</div>
<div class="ctitle" style="position:absolute;bottom:40px">把商品拖到这里添加到购物车</div>
</div>
<div class="products">
<ul>
<li>
<a href="#" class="item">
<img src="~/Iamge/1.png" />
<div>
<p>气球</p>
<p>价格:RMB25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="~/Iamge/1.png" />
<div>
<p>气球</p>
<p>价格:RMB25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="~/Iamge/2.png" />
<div>
<p>气球</p>
<p>价格:RMB25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="~/Iamge/3.png" />
<div>
<p>气球</p>
<p>价格:RMB25</p>
</div>
</a>
</li>
</ul>
</div>
</div>
只能作参考,运行不起来。
EasyUI ---- draggable购物车的更多相关文章
- EasyUI实现购物车、菜单和窗口栏等最常用的用户界面功能
一.EasyUI jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 e ...
- easyUI draggable组件使用
easyUI draggable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- easyUI拖动购物车案例
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字
先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- EasyUI ---- draggable可拖动的用法
<link href="~/Scripts/easyui1.5/themes/default/easyui.css" rel="stylesheet" / ...
- EasyUI - Draggable 拖动控件
效果: html代码: <div id="box" style="width: 400px; height: 200px; background-color: #f ...
- EasyUI Draggable 可拖动
通过 $.fn.draggable.defaults 重写默认的 defaults. 用法 通过标记创建可拖动(draggable)元素. <div id="dd" clas ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(55)-工作流设计-表单布局
系列目录 前言:这一节比较有趣.基本纯UI,但是不是很复杂 有了实现表单的打印和更加符合流程表单方式,我们必须自定义布局来适合业务场景打印!我们想要什么效果?看下图 (我们没有布局之前的表单和设置布局 ...
- JQuery easyui (1) Draggable(拖动)组件
很不习惯这种强迫式的学习,但谁叫我不是老师了,所以还是决定坚持练习,顺带为博客加点东西.虽然我还是很反感短时间内惯性的去熟悉一个工具. easyui做为一个封装了JQusey的UI插件,其实还是蛮好用 ...
随机推荐
- Scala系统学习(三):Scala基础语法
如果您熟悉Java语言语法和编程,那么学习Scala将会很容易.Scala和Java之间最大的句法差异在于行结束字符的分号(;) 是可选的. 当编写Scala程序时,它可以被定义为通过调用彼此的方法进 ...
- soapUI-JDBC Request
1.1.1 JDBC Requet 1.1.1.1 概述 – JDBC Request Option Description JDBC Request TestStep Toolbar 对JDB ...
- testng入门教程12 TestNG执行多线程测试
testng入门教程 TestNG执行多线程测试 testng入门教程 TestNG执行多线程测试 并行(多线程)技术在软件术语里被定义为软件.操作系统或者程序可以并行地执行另外一段程序中多个部分或者 ...
- js五星好评2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 登陆跳板机每天只输入一次token的方法——ssh clone session
自从跳板机升级后,无所不在的token让小PE很是恼火,于是有了这篇文章@_@ Linux or Mac篇 在Fedora或者Mac下很简单,修改~/.ssh/config文件,没有的话,就新建一个( ...
- 使用Jmeter测试Dubbo接口(参数设置篇)
WebSocket接口需要下载dubbo插件才能使用 本次下载的版本为jmeter-plugins-dubbo-1.3.6,下载完成后jar文件放到\lib\ext目录下 由于工作需要,最近需要对du ...
- Python:slice与indices
slice: eg: >>>e=[0,1,2,3,4,5,6] >>>s=slice(2,3) >>>e[s] [2] slice的区间左闭右开[ ...
- FastJson(阿里巴巴)基础
一.所需jar包: fastjson-x.x.xx.jar(本例使用fastjson-1.1.36.jar). 二.解析转化: 1.json字符串 < ------ > js trin ...
- 全局监听SCREEN_ON和SCREEN_OFF的替代方法--监听屏幕解锁事件
在做一个程序的时候,需要时刻保持某一服务是启动的,因此想到了通过监听屏幕SCREEN_ON和SCREEN_OFF这两个action.奇怪的是,这两个action只能通过代码的形式注册,才能被监听到,使 ...
- keepalived+MySQL高可用集群
基于keepalived搭建MySQL的高可用集群 MySQL的高可用方案一般有如下几种: keepalived+双主,MHA,MMM,Heartbeat+DRBD,PXC,Galera Clus ...