Jquery はドラッグ可能なショッピング カートを迅速に構築します DragDrop_jquery

このようにして、購入者は、興味のある商品をショッピング カートにドラッグするか、ショッピング カートの全体の価格と数量を更新しながらショッピング カートから商品を削除するだけで済みます。
次に、例を開始しましょう。この例では、データベースに接続してデータを読み取って製品を初期化するのではなく、次のようにいくつかの仮想製品を作成します。

コードをコピー コードは次のとおりです。

public class Product
{
public string Code { get;
パブリック文字列名 { 取得; }
パブリック二重価格 { セット; } 2. 製品リストの構築
[code]
public クラス Product
{
public string Name { get; >public string 説明 { get; set; }


3. DataList を作成し、List をバインドします。 >


コードをコピー


コードは次のとおりです:

RepeatDirection="水平" runat="server">

コード='<%# Eval("コード") %>' id='item_<%# Container.ItemIndex 1 %>'>

%# Eval( "コード") %>

<%# Eval("名前")

<%# Eval("説明") %>

$<%# Eval(" ") %> ;

private void BindData()
{
var products = GetProducts();
dlProducts.DataSource = products;
dlProducts.DataBind();
}


productItemStyle スタイル名
ItemIndex は連続した製品番号








4. ドラッグ可能な製品 Div を生成
最新の Jquery JS ファイルとそのファイルをダウンロードしますUI ファイル:

コードをコピー コードは次のとおりです:

ページの初期化時に Div ドラッグ可能が生成されます コードをコピーします

コードは次のとおりです:


$(document).ready(function() {
$(". productItemStyle").draggable({ helper: "clone" , opacity: "0.5" });

)};

5. DropZone を作成します DropZone はショッピング カート エリアです コードをコピーします

コードは次のとおりです:


$(".dropZone").droppable(

{
accept: ".productItemStyle",
hoverClass: "dropHover",
drop: function(ev, ui) {

varippedItem = ui.draggable.clone().addClass ("droppedItemStyle"); var productCode =ippedItem[0].attributes["code"].nodeValue; var productPrice = getFormattedPrice(droppedItem[0].attributes["price"].nodeValue ); varremoveLink = document.createElement("a" ); removeLink.innerHTML = "削除"; removeLink.href = "#";

removeLink.onclick = function()

{
$(".dropZone").children().remove("#"ippedItem[0].id);
updateTotal(productPrice * (
}
droppedItem[0 ].appendChild(removeLink);
updateTotal(productPrice); }
);


Accept パラメータ：Class="productItemStyle" で Div を表示
hoverClass パラメータ：DropZone に Product を配置したときのスタイル
Drop 関数：DropZone に Product をドラッグ＆ドロップしたときに起動される関数。この関数は主に、製品アイテムのクローン作成、価格の計算、削除ボタンの追加、および削除ボタンがクリックされたときにイベントをトリガーします。
価格計算 updateTotal() 関数

コードをコピー コードは次のとおりです:

// 合計を更新します!
function updateTotal(price) {
total = parseFloat(price)
$("#total").html(total.toFixed(2)); (" .shoppingCartTotal").effect("bounce");
}

最終的な効果は次のとおりです:


英語の元のアドレス: http://www.codeproject.com/KB/aspnet/JQueryShoppingCart.aspx