jQueryUI 购物车拖放功能

 1 <style type="text/css">
 2 .basket{
 3 border:transparent solid 2px;
 4 }
 5 img{
 6 width:80px;
 7 height:80px;
 8 }
 9 .hover{
10 border-color:red;
11 }
12 </style>
13
14 <h2>商品</h2>
15 <div id="b1" style="height:80px;width:100%;background-color:gainsboro;">
16
17 <img src="~/Content/images/1.bmp" />
18 <img src="~/Content/images/2.bmp" />
19 <img src="~/Content/images/3.bmp" />
20 <img src="~/Content/images/4.bmp" />
21 </div>
22 <h2>购物车</h2>
23 <div id="shop">
24 <img src="~/Content/images/cart.png" class="basket" width="80" height="80"/>
25 </div>
26
27 <script>
28
29 $("#b1 img").draggable({
30 revert: "invalid"
31 });
32 $("#shop img.basket").draggable({
33 disabled:"true"
34 })
35 $("#shop img.basket").droppable({
36 hoverClass: "hover",
37 drop: function (e, ui) {
38 $("#shop").append(ui.draggable);
39 $(ui.draggable).css({
40 position: "relative",
41 top: "0px",
42 left: "0px"
43 }).addClass("bought");
44 }
45 });
46
47 $("#b1").droppable({
48 accept:".bought",
49 drop: function (e, ui) {
50 $("#b1").append(ui.draggable);
51 $(ui.draggable).css({
52 position: "relative",
53 top: "0px",
54 left: "0px"
55 }).removeClass("bought");
56 }
57 });
58
59 </script>

时间: 2024-10-11 02:53:38

jQueryUI 购物车拖放功能的相关文章

Draggabilly – 轻松实现拖放功能(Drag &amp; Drop)

Draggabilly 是一个很小的 JavaScript 库,专注于拖放功能.只需要简单的设置参数就可以在你的网站用添加拖放功能.兼容 IE8+ 浏览器,支持多点触摸.可以灵活绑定事件,支持 RequireJS 以及 Bower 安装. 您可能感兴趣的相关文章 创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果 你见过吗?9款超炫的复选框(Checkbox)效果 超赞!基于 Bootstrap 的响应式的后台管理模板 太赞了!超炫的页面切换动画效果[附源

python实现简单的循环购物车小功能

python实现简单的循环购物车小功能 # -*- coding: utf-8 -*- __author__ = 'hujianli' shopping = [ ("iphone6s", 5000), ("book python", 81), ("iwach", 3200), ("电视机", 2200) ] def zero(name): if len(name) == 0: print("\033[31;1m您的输

如何使用LightningChart拖放功能进行数据转移 ?

本文主要介绍如何使用LightningChart扩展拖放功能为所有图表组件创建图表,如:系列,标题,轴线等等.支持用鼠标放置自定义对象到另一个图表中,如:可以添加或修改JSON/CSV或其他格式的数据. 开发人员也可以使用ChartManager工具来协调多个LightningChart控件. 支持拖放图表中所有系列到Windows Forms 和 WPF应用平台中. 注意!如果你只在一个图表中轴线之间拖放系列,不需要使用ChartManager. 在一个或多个图表中系列拖放: · 启用鼠标交互

HTML5移动开发之路(16)——神奇的拖放功能

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(16)--神奇的拖放功能 在智能手机发展飞速的现在拖放功能已经成为一种时尚,但是在我们的浏览器上是不是还缺少这种方便快捷的功能?在HTML5的新标准中就有关于拖放的标准,作为HTML5标准的一部分,任何元素都可以被拖放. 一.浏览器支持情况 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 注释:在 Safari 5.1.2 中不支持

Qt拖放功能

mytextedit.h: 1 #ifndef MYTEXTEDIT_H 2 #define MYTEXTEDIT_H 3 4 #include <QTextEdit> 5 #include "ui_mytextedit.h" 6 #include <QUrl> 7 #include <QDropEvent> 8 #include <QMimeData> 9 #include <QString> 10 #include <

WPF拖放功能实现zz

写在前面:本文为即兴而作,因此难免有疏漏和词不达意的地方.在这里,非常期望您提供评论,分享您的想法和建议. 这是一篇介绍如何在WPF中实现拖放功能的短文. 首先要读者清楚的一件事情是:拖放主要分为拖放源和拖放目标两个组成.拖放源和拖放目标各自拥有不同的事件.软件开发人员需要在适当的事件中完成相应功能. 试想拖放是如何操作的:用户选中一个界面元素,并在鼠标左键按下的情况下移动鼠标,最后,在到达拖放目标时松开鼠标左键,从而完成数据拖放的全过程.从程序编写的角度来看,用户需要在左键选中项目并按下的情况

HOW TO: 在 Visual C# .NET 应用程序中提供文件拖放功能

本文假定您熟悉下列主题: Windows 窗体列表框控件 Windows 窗体事件处理 生成示例的步骤 列表框控件提供了您需要处理的两个拖放事件: DragEnter 和 DragDrop. 当您在控件的边界内拖动对象时,便会发生DragEnter 事件:该事件用于确定当前拖动的对象是不是您要放到控件上的对象. 在将一个或多个文件拖到控件上时,需要处理此事件. 这使得在将对象拖到控件上方时,能够根据所拖动的对象显示相应的图标. 将拖动的对象释放到控件上时,会发生DragDrop 事件. 通过处理

微信小程序之购物车的功能

1.购物车里面功能无非就是删除商量,增加(减少)数量,单全选,商品合计 2.这段代码var cartItems = this.data.cartItems  获取购物车里面的商品,之后在通过下标e.currentTarget.dataset.index来获取当前的商品   选择事件(单全选) //单选 select:function(e){ var CheckAll = this.data.CheckAll; CheckAll = !CheckAll var cartItems = this.d

Draggabilly 轻松实现拖放功能|插件下载|Demo下载

 Draggabilly是一款功能强大的网页元素拖动拖拽插件.该元素拖拽插件可以和jQuery结合使用,也可以以纯js的方式使用.它提供了强大的拖拽元素的能力,并且可以支持IE8浏览器和移动触摸设备.官网:https://draggabilly.desandro.com 网上有很多关于Draggabilly的例子, 不过大部分都不够详细, 我在网上下载了一个例子, 在此基础上做了一些描述, 包括参数含义, 事件绑定,元素事件(dragStart,dragMove,dragEnd,pointerD