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插件,其实还是蛮好用 ...
随机推荐
- SQL死锁知识及解决办法
[翻译]:SQL死锁-死锁排除 min.jiang 2014-03-18 00:23 阅读:874 评论:1 项目中死锁的解决经历 min.jiang 2014-03-17 01:09 阅读: ...
- SVN: is scheduled for addition, but is missing
删除文件夹后点commit提交,但是报错,报错内容如下:提示 "svn: Commit failed (details follow): svn: '/***/xxx.c' is sched ...
- python2.7 环境配置
1.安装python2.7.8之后,配置环境变量:在path中配置python的安装路径 在cmd框中执行python,进入到python命令执行,即为配置成功. 2.执行过程中,提示缺少xlutil ...
- git客户端msysGit和TortoiseGit使用
windows下使用TortoiseGit代替Git命令行操作(参考http://www.cnblogs.com/candle806/p/4071656.html) 1.配置TortoiseGit与m ...
- 多项式函数插值:多项式形式函数求值的Horner嵌套算法
设代数式序列 $q_1(t), q_2(t), ..., q_{n-1}(t)$ ,由它们生成的多项式形式的表达式(不一定是多项式): $$p(t)=x_1+x_2q_1(t)+...x_nq_1(t ...
- bootstrap modal 垂直居中对齐
bootstrap modal 垂直居中对齐 文章参考 http://www.bubuko.com/infodetail-666582.html http://v3.bootcss.com/Jav ...
- head first java读书笔记
head first java读书笔记 1. 基本信息 页数:689 阅读起止日期:20170104-20170215 2. 标签 Java入门 3. 价值 8分 4. 主题 使用面向对象的思路介绍J ...
- 18B树、B++树和Trie树
B树.B++树和Trie树 B树 定义:一个非空M元(也称M阶)B树(R.Bayer,1970年) 满足下列条件: 1)每个结点含有m个元素a1<a2<…<am.含有m个元素的结点有 ...
- AVPlayerLayer
AVPlayerLayer 最后一个图层类型是AVPlayerLayer.尽管它不是Core Animation框架的一部分(AV前缀看上去像),AVPlayerLayer是有别的框架(AVFound ...
- Python:键盘输入input
从键盘读入数据 >>> num=input('利润是:') 利润是:55 >>>