CODEWITHSUNDEEP
javascriptjqueryhtml
Sanjay Rathod
Sanjay Rathod

Reputation: 1143

How do I compare draggable element by jQuery?

my html code is

<div id="products">
    <div class="ui-widget-content">
        <ul>
            <li data-id="1" class = "credit"> 10000$ </li>
            <li data-id="2"class = "credit"> 5000$ </li>
            <li data-id="3" class = "credit"> 10000$ </li>
            <li data-id="4" class = "credit"> 5000$ </li>
        </ul>
    </div>
</div>
<table width:100%>
    <tr><td>
 <h3 class="ui-widget-header">Yahoo</h3>
<table border=1 width=100%>
    <tr>
        <td><div id="shoppingCart1" class="shoppingCart">
    <h7 class="ui-widget-header">Number 1</h7>
    <div class="ui-widget-content">
        <ol>
            <li class="placeholder">Add your items here</li>
        </ol>
    </div>
</div>
     </td>

    </tr>
</table>
        </td><td>
 <h3 class="ui-widget-header">Yahoo</h3>
<table border=1 width=100%>
    <tr>
        <td><div id="shoppingCart1" class="shoppingCart">
    <h7 class="ui-widget-header">Number 2</h7>
    <div class="ui-widget-content">
        <ol>
            <li class="placeholder">Add your items here</li>
        </ol>
    </div>
</div>
     </td>
    </tr>
</table>
        </td></tr></table>

and my js code is 

$("#products li").draggable({
    appendTo: "body",
    helper: "clone"
});
$("#shoppingCart1 ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept:".credit",
    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);
        // 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");
    }
});
$("#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);
        // 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");
    }
});

now also you can see demo here - http://jsfiddle.net/Sanjayrathod/5DMru/

What i want is, if i drag and drop an item in Number 1 box, and later i drag and drop an item in Number 2 box,now after dropping the items in the respective Number box i want to get the total / summation value of the respective boxes and compare the summation value of the respective boxes, i.e compare the summation of Number Box 1 with the summation of Number box 2

Upvotes: 0

Views: 561

Answers (1)

Shimon Rachlenko
Shimon Rachlenko

Reputation: 5517

You just need to traverse each li in both boxes and sum up their values:

var amount1 = 0;
$("#shoppingCart1 ol").find('li').each(function () {
    amount1 += parseInt($(this).text());
});
var amount2 = 0;
$("#shoppingCart2 ol").find('li').each(function () {
    amount2 += parseInt($(this).text());
});
if(amount1 > amount2) { // the value in the first box is greater than in the second
    //TODO notify user
} else if (amount1 < amount2) { // the value in the first box is less than in the second
    //TODO notify user
} else { // // the value in the first box is equal to the second
    //TODO notify user
}

Do this in each of droppable handles after you add value. I updated your fiddle: see here.

BTW, you have a typo in your code: both boxes have id shoppingCart1 instead of second box having id shoppingCart2.

Upvotes: 1

Related Questions