ショッピングカート：ドロップイベント（JQuery）の合計

Question

私は現在、ドロップ可能でドラッグ可能な要素を備えたショッピングカートを作成しています。各要素には値（価格）があり、ターゲットにドロップされると、値は入力フィールドに表示されます。 はここに私のバイオリンです：https://jsfiddle.net/SamyAbouseda/jhchfwzg/

HTML

<div id="draggable" class="ui-widget-content" data-product="455"> 
<p>Product 1</p> 
<p>455$</p> 
</div> 

<div id="draggable2" class="ui-widget-content" data-product="37"> 
<p>Product 2</p> 
<p>37$</p> 
</div> 

<div id="droppable" class="ui-widget-header"> 
<p>Shopping Cart</p> 
</div> 
<input id="sum" type="text"><span>$</span> 

jQueryの

$("#draggable, #draggable2").draggable(); 
$("#droppable").droppable({ 
    drop: function(event, ui) { 
    console.log(ui.draggable.length); 
    $('input').val(ui.draggable.data('product')); 
    $(this).addClass("ui-state-highlight").find("p").html("Product added to your cart!"); 
} 
}); 

さて、目標はそのターゲットに、それらの要素の合計を落としているとき、いくつかの要素入力フィールドに表示する必要があります。

私はこれを見つけました。ターゲットに表示するためにドロップされた要素を必要とする点を除いて、ほぼ目標の結果です（現在のショッピングカートごとに）。私はそれを手伝って、自分のコードに追加しました。何度も何度も始めましたが、それに夢中になって解決策を見つけることができませんでした。

私はJQueryで新しく、まだ完全にはそれほど快適ではありません。あらゆる種類の助けが素晴らしいだろう！

Answer 1

あなたの2番目のフィドルショッピングカートをさらに進めて、私は必要な変更を加えました。もちろん、このコードは最適ではありませんが、それは仕事を行い、それを達成する方法をあなたに指示します。

私が作った2つの変更は、次のとおりです。

1. ドロップアイテムを非表示にします。
2. ユーザーがショッピングカートから取り出したときに表示します。

var data = {"total":0,"rows":[]}; 
 
var totalCost = 0; 
 

 

 
$(function(){ 
 
    $('#cartcontent').datagrid({ 
 
    singleSelect:true 
 
    }); 
 
    $('.item').draggable({ 
 
    revert:true, 
 
    //proxy:'clone', 
 
    onStartDrag:function(){ 
 
     $(this).draggable('options').cursor = 'not-allowed'; 
 
     $(this).draggable('proxy').css('z-index',10); 
 
    }, 
 
    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('$')[1])); 
 
     $(source).hide(); 
 
    } 
 
    }); 
 
}); 
 

 
function addProduct(name,price){ 
 
    function add(){ 
 
    for(var i=0; i<data.total; i++){ 
 
     var row = data.rows[i]; 
 
     if (row.name == name){ 
 
     row.quantity += 1; 
 
     return; 
 
     } 
 
    } 
 
    data.total += 1; 
 
    data.rows.push({ 
 
     name:name, 
 
     quantity:1, 
 
     price:price, 
 
     remove: '<a href="#" class="remove" onclick="removeProduct(this, event)">X</a>' 
 
    }); 
 
    } 
 
    add(); 
 
    totalCost += price; 
 
    $('#cartcontent').datagrid('loadData', data); 
 
    $('div.cart .total').html('Total: $'+totalCost); 
 
} 
 

 
function removeProduct(el, event) { 
 
    var tr = $(el).closest('tr'); 
 
    var name = tr.find('td[field=name]').text(); 
 
    var price = tr.find('td[field=price]').text(); 
 
    var quantity = tr.find('td[field=quantity]').text(); 
 
    for(var i = 0; i < data.total; i++){ 
 
    var row = data.rows[i]; 
 
    if (row.name == name) { 
 
     data.rows.splice(i, 1); 
 
     data.total--; 
 
     break; 
 
    } 
 
    } 
 
    totalCost -= price * quantity; 
 
    $('#cartcontent').datagrid('loadData', data); 
 
    $('div.cart .total').html('Total: $'+totalCost); 
 
    var li = $('p:contains(' + name + ')').parents('.item').first().show(); 
 
    console.log(name, li); 
 
}

.products{ 
 
    list-style:none; 
 
    margin-right:300px; 
 
    padding:0px; 
 
    height:100%; 
 
} 
 
.products li{ 
 
    display:inline; 
 
    float:left; 
 
    margin:10px; 
 
} 
 
.item{ 
 
    display:block; 
 
    text-decoration:none; 
 
} 
 
.item img{ 
 
    border:1px solid #333; 
 
} 
 
.item p{ 
 
    margin:0; 
 
    font-weight:bold; 
 
    text-align:center; 
 
    color:#c3c3c3; 
 
} 
 
.cart{ 
 
    position:fixed; 
 
    right:0; 
 
    top:0; 
 
    width:300px; 
 
    height:100%; 
 
    background:#ccc; 
 
    padding:0px 10px; 
 
} 
 
h1{ 
 
    text-align:center; 
 
    color:#555; 
 
} 
 
h2{ 
 
    position:absolute; 
 
    font-size:16px; 
 
    left:10px; 
 
    bottom:20px; 
 
    color:#555; 
 
} 
 
.total{ 
 
    margin:0; 
 
    text-align:right; 
 
    padding-right:20px; 
 
}

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
 
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> 
 
<link href="http://www.jeasyui.com/easyui/themes/icon.css" rel="stylesheet"/> 
 
<link href="http://www.jeasyui.com/easyui/themes/default/easyui.css" rel="stylesheet"/> 
 

 
<ul class="products"> 
 
    <li> 
 
    <a href="#" class="item"> 
 
     <img src="images/shirt1.gif"/> 
 
     <div> 
 
     <p>Balloon</p> 
 
     <p>Price:$25</p> 
 
     </div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#" class="item"> 
 
     <img src="images/shirt2.gif"/> 
 
     <div> 
 
     <p>Feeling</p> 
 
     <p>Price:$25</p> 
 
     </div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#" class="item"> 
 
     <img src="images/shirt3.gif"/> 
 
     <div> 
 
     <p>Elephant</p> 
 
     <p>Price:$25</p> 
 
     </div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#" class="item"> 
 
     <img src="images/shirt4.gif"/> 
 
     <div> 
 
     <p>Stamps</p> 
 
     <p>Price:$25</p> 
 
     </div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#" class="item"> 
 
     <img src="images/shirt5.gif"/> 
 
     <div> 
 
     <p>Monogram</p> 
 
     <p>Price:$25</p> 
 
     </div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#" class="item"> 
 
     <img src="images/shirt6.gif"/> 
 
     <div> 
 
     <p>Rolling</p> 
 
     <p>Price:$25</p> 
 
     </div> 
 
    </a> 
 
    </li> 
 
</ul> 
 
<div class="cart"> 
 
    <h1>Shopping Cart</h1> 
 
    <div style="background:#fff"> 
 
    <table id="cartcontent" fitColumns="true" style="width:300px;height:auto;"> 
 
     <thead> 
 
     <tr> 
 
      <th field="name" width=140>Name</th> 
 
      <th field="quantity" width=60 align="right">Quantity</th> 
 
      <th field="price" width=60 align="right">Price</th> 
 
      <th field="remove" width=60 align="right">Remove</th> 
 
     </tr> 
 
     </thead> 
 
    </table> 
 
    </div> 
 
    <p class="total">Total: $0</p> 
 
    <h2>Drop here to add to cart</h2> 
 
</div>

http://jsfiddle.net/Vwu37/143/