[jQuery] Drag-and-drop: how to count dropped items and remove dropped items
Hi,
I have a simple drag and drop application, which works by the user
adding breakfast food items to a menu div:
<div id="droppable-accept-function" class="droppable"></div>
<div class="draggable breakfast"><span class="sweet">White toast/roll</
span></div>
<div class="draggable breakfast"><span class="carb">Wholemeal toast/
roll</span></div>
<div class="draggable breakfast"><span class="carb">Oats</span></div>
<script type="text/javascript">
$(document).ready(function(){
$('.draggable').draggable({
helper: 'clone'
});
$('#droppable-accept-function')
.droppable({
accept: function(draggable) {
return $(draggable).is('.breakfast');
},
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
$(this).append($(document.createElement('div')).html($
(ui.draggable.element).html()));
}
});
});
</script>
What I'd like to do though are two things.
1. I'd like a pop-up warning to stop people adding items of similar
class - so for example, you can't add 'oats' and 'wholemeal toast'
both to the div because they both have the class 'carb'.
2. I'd like to add a remove button to the items so that they can be
removed from the menu div - at the moment you can only add them.
I'd be most grateful for any help in doing this - I'm brand new to
Javascript and jquery and have got as far as I can, so any pointers
would be much appreciated.
Thanks folks...