働くフィドルDEMO
これを試して
これらのタグを head タグに追加します。
<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>
コード
$(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;
}
これが役に立てば幸いです、ありがとう