コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Jquery はドラッグ可能なショッピング カートを迅速に構築します DragDrop_jquery

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

WBOY
リリース： 2016-05-16 18:40:52
オリジナル
1463 人が閲覧しました

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

コードをコピー コードは次のとおりです。
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
    関連ラベル：
    jquery
    ソース：php.cn
    前の記事：Javascript コンストラクター、パブリック権限、プライベート権限、および静的メンバー定義メソッド_JavaScript スキル 次の記事：JavaScript ニュース リストの単純なカプセル化_javascript スキル
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
    から 2024-04-06 14:54:03
    0
    2
    421
    jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
    から 2024-04-05 09:26:49
    0
    1
    1418
    エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
    から 2024-04-04 18:40:04
    0
    1
    3528
    ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
    から 2024-04-04 17:27:27
    0
    1
    417
    Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
    から 2024-04-04 12:53:48
    0
    1
    303
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート