买家只要求把自身感兴趣的商品拖曳到本身的购
那样一来，购买者只必要把温馨感兴趣的物品拖曳到温馨的购物车中，也足以从购物车中除去商品 同期更新购物车的全部价格和数目。 那我们就从头实例吧，本实例并不曾链接数据库读取数据来开端化Products,而是创设了一些杜撰的物品如下： 1、 创制Product实体类 复制代码 代码如下: public class Product { public string Code { get; set; } public string Name { get; set; } public string Description { get; set; } public double Price { get; set; } } [code] 2、 营造筑商品List [code] public class Product { public string Code { get; set; } public string Name { get; set; } public string Description { get; set; } public double Price { get; set; } } 3、创造DataList并绑定List 复制代码 代码如下:
$
牵引作用早就经成为各类网址引发顾客的一大优点，那有没有想过哪些把拖曳功能使用到电子商务网址的购物车效率模块中吗？ 这样一来，购买者只须要把团结感兴趣的货物拖曳到温馨的购物车中，也足以从购物车中除去商品 同期立异购物车的完好价格和数量。
private void BindData() { var products = GetProducts(); dlProducts.DataSource = products; dlProducts.DataBind(); } productItemStyle 样式名称 Container.ItemIndex动态变化三番两次的商品编号 4、 生成Products Div Draggable 下载最新的Jquery JS文件及其UI文件： 复制代码 代码如下:
那大家就起来实例吧，本实例并从未链接数据库读取数据来领头化Products,而是成立了一些设想的货物如下：
页面早先化时生成Div Draggable 复制代码 代码如下: $.ready { $.draggable({ helper: "clone", opacity: "0.5" }); )}; 5、制造贰个DropZone DropZones 是购物车区域 复制代码 代码如下: $.droppable( { accept: ".productItemStyle", hoverClass: "dropHover", drop: function { var droppedItem = ui.draggable.clone().addClass; var productCode = droppedItem[0].attributes["code"].nodeValue; var productPrice = getFormattedPrice(droppedItem[0].attributes["price"].nodeValue); var removeLink = document.createElement; removeLink.innerHTML = "Remove"; removeLink.className = "deleteLink"; removeLink.href = "#"; removeLink.onclick = function.children().remove("#" + droppedItem[0].id); updateTotal; } droppedItem[0].appendChild.append; updateTotal; Accept参数:突显Class= “productItemStyle”的Div hoverClass参数：当有Product放到DropZone时的样式 drop函数：当Product拖放到DropZone时出发的函数，此函数主要做了一个Product Item的Clone，价格的计算、增添Remove按钮以致到点击Remove按键时所接触的平地风波。 价格的总结updateTotal()函数 复制代码 代码如下: // update the total! function updateTotal { total += parseFloat.html; $.effect; } 最终效果如下图： 德语原作地址：
1、 创建Product实体类
public class Product
{
public string Code { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public double Price { get; set; }
}
2、 构建筑商品List<Product>
public class Product
{
public string Code { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public double Price { get; set; }
}
3、创建DataList并绑定List<Product>
<asp:DataList ID="dlProducts" RepeatColumns="3"
RepeatDirection="Horizontal" runat="server">
<ItemTemplate>
<div class="productItemStyle" price='<%# Eval("Price") %>'
code='<%# Eval("Code") %>' id='item_<%# Container.ItemIndex + 1 %>'>
<li>
<%# Eval("Code") %>
</li>
<li>
<%# Eval("Name") %>
</li>
<li>
<%# Eval("Description") %>
</li>
<li>
$<%# Eval("Price") %>
</li>
</div>
</ItemTemplate>
</asp:DataList>
private void BindData()
{
var products = GetProducts();
dlProducts.DataSource = products;
dlProducts.DataBind();
}
productItemStyle 样式名称
`Container.ItemIndex``动态生成三番两回的商品编号```
``
``
4、 生成Products Div Draggable
下载最新的Jquery JS文件及其UI文件：
<script language="javascript" type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script language="javascript" type="text/javascript"
src="jquery-ui-personalized-1.6rc4.min.js"></script>
页面最先化时生成Div Draggable
$(document).ready(function() {
$(".productItemStyle").draggable({ helper: "clone", opacity: "0.5" });
)};
5、创立三个DropZone
DropZones 是购物车区域
$(".dropZone").droppable(
{
accept: ".productItemStyle",
hoverClass: "dropHover",
drop: function(ev, ui) {
var droppedItem = ui.draggable.clone().addClass("droppedItemStyle");
var productCode = droppedItem[0].attributes["code"].nodeValue;
var productPrice =
getFormattedPrice(droppedItem[0].attributes["price"].nodeValue);
var removeLink = document.createElement("a");
removeLink.innerHTML = "Remove";
removeLink.className = "deleteLink";
removeLink.href = "#";
removeLink.onclick = function()
{
$(".dropZone").children().remove("#" + droppedItem[0].id);
updateTotal(productPrice * (-1));
}
droppedItem[0].appendChild(removeLink);
$(this).append(droppedItem);
updateTotal(productPrice);
}
}
);
Accept``参数``:``展示``Class=
“productItemStyle”的Div
`hoverClass参数：当有Product放到DropZone``时的体制```
`drop函数：当Product拖放到DropZone时出发的函数，此函数主要做了一个Product Item的Clone，价格的计算、添加Remove按钮以及到点击Remove``按键时所接触的平地风波。```
``
价格的计算updateTotal()函数``
// update the total!
function updateTotal(price) {
total += parseFloat(price);
$("#total").html(total.toFixed(2));
$(".shoppingCartTotal").effect("bounce");
}
最后效果如下图：
匈牙利（Magyarország卡塔 尔（阿拉伯语：قطر语原来的文章地址：
版权声明：本文由大奖888-www.88pt88.com-大奖888官网登录发布于www.88pt88.com,转载请注明出处：买家只要求把自身感兴趣的商品拖曳到本身的购