-1

jqueryを使用していくつかのコンテナにドラッグアンドドロップしたいくつかの数字を追加したいと思います。

ここに私のhtmlコードがあります

<div id="products">
    <h1 class="ui-widget-header">Blocks</h1>
    <div class="ui-widget-content">
        <ul>
                       <li data-id="1" class = "credit"> 400 </li>
            <li data-id="2"class = "credit"> 200</li>
            <li data-id="3" class = "credit"> 300 </li>
            <li data-id="4" class = "credit"> 500  </li>
               <li data-id="5" class = "credit"> 700  </li>

        </ul>
    </div>
</div>
<table>
    <tr><td>

<table border=1 width=100%>
    <tr>
        <td><div id="shoppingCart1" class="shoppingCart">
    <h7 class="ui-widget-header">no1</h7>
    <div class="ui-widget-content">
        <ol style="list-style:none">
            <li class="placeholder">Add your items here</li>
        </ol>
    </div>
</div>
     </td>
            </tr>
</table>
        </td><td>

<table border=1 width=100%>
    <tr>
        <td><div id="shoppingCart1" class="shoppingCart">
    <h7 class="ui-widget-header">no2</h7>
    <div class="ui-widget-content">
       <ol style="list-style:none" id="place2">
            <li class="placeholder">Add your items here</li>
        </ol>
    </div>
</div>
     </td>
    </tr>
</table>
        </td></tr></table>

そして私のjqueryコードは

$("#products li").draggable({
    appendTo: "body",
    helper: "clone"
});
$("#shoppingCart1 ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
     containment: "document",
        revert: true,
        accept:".credit",
    drop: function(event, ui) {
        var self = $(this);
                     contents = $(this).attr('#shoppingCart1 ol li');
        self.find(".placeholder").remove();
        var productid = ui.draggable.attr("data-id");
        if (self.find("[data-id=" + productid + "]").length) return;
        $("<li></li>", {
            "text": ui.draggable.text(),
            "data-id": productid
        }).appendTo(this);

        var cartid = self.closest('.shoppingCart').attr('id');
        $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
    }
}).sortable({
    items: "li:not(.placeholder)",
    sort: function() {
        $(this).removeClass("ui-state-default");
    }
});
$("#shoppingCart2 ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept:".debit",
    drop: function(event, ui) {
        var self = $(this);
        self.find(".placeholder").remove();
        var productid = ui.draggable.attr("data-id");
        if (self.find("[data-id=" + productid + "]").length) return;
        $("<li></li>", {
            "text": ui.draggable.text(),
            "data-id": productid
        }).appendTo(this);
        var contents=ui.draggable.text();
 //$("#list").attr( ui.draggable.text());


        // To remove item from other shopping chart do this
        var cartid = self.closest('.shoppingCart').attr('id');
        $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
    }
}).sortable({
    items: "li:not(.placeholder)",
    sort: function() {
        $(this).removeClass("ui-state-default");
         $('#list').text('test');
    }
});

今の問題は、ドラッグアンドドロップ後にこの番号を追加したいので、どうすればよいですか。ここでデモも見ることができます - http://jsfiddle.net/Sanjayrathod/aNreg/40/

私はこれを4時間まで試し、インターネット全体を検索しましたが、成功しませんでした。ありがとう、助けてください。

4

1 に答える 1

1

http://jsfiddle.net/aNreg/43/

追加を行うコードは次のとおりです。

var sum = 0;
self.find('li').each(function(index)
             {
                 sum += parseInt($(this).text());
             });
$('#math1').text(sum);
于 2013-09-17T12:59:53.883 に答える