Jquery droppable object. Trying to figure out how to add a value to droppable object

Question

new to programming and jquery. I have a question that seems so simple but I am unable to figure it out. If you can help, it is greatly appreciated

How do I add a value to a droppable object so when the object is dropped into the droppable area it registers its assigned value? It would also need to add multiple objects as well.

For example object 1 = 10, object 2 = 25 etc. When the object is dropped, a counter displays the value.

So object 1 would register 10 when dropped, if object two was then also dropped, the counter would register and display 35 adding both objects etc.

thanks

Answer 1

Working fiddle DEMO

Try this

Add these tags to your head tag.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

code

$(function () {
    var drg;
    var a = 0;
    var cln;
    var i = 0;
    $(".ui-widget-content").draggable({ //div with the class'ui-widget-content' is set draggable
        drag: function (event, ui) {      
            drg = $(this);                // on drag gets which div is it
            $("#droppable").droppable('enable');  // enabling drop of droppable div 
        },
        helper: 'clone'          // this to get the clone copy of the div on drag         

    });

    $("#droppable").droppable({

        drop: function () {       

            a = a + parseInt(drg.attr('value'));   //get the value of the dropped div add to the total
            $("#counter").html(a);
            if ($("#" + drg.text()).length > 0) {   // if droppable div already contains the same div eg'toy', then only the number to be increased
                var txt = drg.text() + "1";
                $("#" + txt).html(parseInt($("#" + txt).text()) + 1);
            } else

            {             // else append the div to the droppable div
                $(this).append("<div id=" + drg.text() + " value=" + drg.attr('value') + ">" + drg.text() + "</div>");


                $(this).append("<div id='" + drg.text() + "1' style='float:right'>" + $("#" + drg.text()).length + "</div><br>");  // lenght of the div eg:' toy    1' ,where 1 is the length
            }
            $("#" + drg.text()).draggable({   // enable the div dropped eg:'toy' in the droppable div to be draggable
                drag: function (event, ui) {
                    $("#droppable").droppable('disable'); // on drag of it disable drop to the droppable div
                    drg = $(this);  //get which div is dragged

                },
                stop: function (event, ui) {   // on drag end or dropped
                    var tt = drg.text() + "1";
                    if (parseInt($("#" + tt).text()) > 1) {  //eg: if in case 'toy' length >1 ie 'toy    3'
                        $("#" + tt).html(parseInt($("#" + tt).text()) - 1); //reduce the length field by 1


                    } else {    // else remove the field out of droppable div

                        $("#" + drg.text()).remove();

                        $(this).remove();
                        $("#" + tt + " + br ").remove();
                        $("#" + tt).remove();

                    }
                    a = a - parseInt(drg.attr('value'));  // reduce the div value from total amount
                    $("#counter").html(a);

                },
                helper: 'clone'    

            });
        }

    });

});

html

<div class="ui-widget-content" value="30">toy</div>
<br>
<div class="ui-widget-content" value="20">pencil</div>
<br>
<div class="ui-widget-content" value="10">pen</div>
<div id="droppable" class="ui-widget-header"></div>
<div style="float:bottom">Total : $</div>
<div id="counter">0</div>

css

div {
    float: left;
}
#droppable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    float: left;
    margin: 10px;
    border:3px solid;
}

Hope this helps, Thank you

Answer 2

You could use a data attribute such as data-drag-value on your draggable items, and then retrieve this on the drop event.

HTML:

<div style="float:left">
    <ul id="myDragList">
        <li data-drag-value="1">One</li>
        <li data-drag-value="2">Two</li>
        <li data-drag-value="3">Three</li>
    </ul>
</div>
<div id="myDroppable">Drop here
    <div id="info"></div>
</div>

JavaScript:

$(document).ready(function () {
    $("#myDragList li").draggable();
    $("#myDroppable").droppable({
        drop: function (event, ui) {
            dragValue = ui.draggable.attr("data-drag-value");
            $("#info").html("data-drag-value = " + dragValue);
        }
    });
});

Have a look at my JSFiddle example here:

http://jsfiddle.net/markwylde/Ga34x/

Answer 3

Updated DEMO

Try this

First add these tags to your head tag.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

code

       $(function () {
  var drg;
    var a=0;
    $(".ui-widget-content").draggable({
         drag: function (event, ui) {
            drg=$(this);
            }
    });
    $("#droppable").droppable({
       out        : function(){

            a= a-parseInt(drg.attr('value'));
            $("#counter").html(a);

        },
       drop  : function(){
       a= a+parseInt(drg.attr('value'));
       $("#counter").html(a);
    }
    });
});

HTML

<div class="ui-widget-content" value="30">
toy</div>
<br>
<div class="ui-widget-content" value="20">
pencil</div>
    <br>
<div  class="ui-widget-content" value="10">
pen</div>

<div id="droppable" class="ui-widget-header"></div>
<div id="counter"></div>