JQuery droppable / draggable
At the moment I have a set of divs generated dynamically by php and they all have their ids starting with 'itembox' with counts added. I have a dumpable trash bin area on a page for the user to delete an individual itembox by doing fdragging and navigating to trash.
My problem is that the droppable doesn't seem to get activated when I drag the original while it functions (great) when I have a helper: 'clone' set. Unfortunately, however, when dragging, the clone function takes its clone from the first iteration of the itembox, no matter which itembox is actually being dragged.
So I'm looking for a solution to either force the droppable to accept the original, or to force the clone function to take its clone from the itembox that was actually dragged.
I guess the problem must be with the accept option of your droppable initializer. Just try this:
$('#mydroppable').droppable(
{
accept: function() { return true; },
drop: function () { alert("Dropped!"); }
});
Now this will accept everything, so you should probably implement some filtering in the accept function, but it should work nonetheless.
You can also try the next solution.
<script type="text/javascript">
$(document).ready(function(){
$('.srcfield').draggable({
revert: true
});
$('#trash').droppable({
accept : ".srcfield",
over: function(){
$(this).removeClass('out').addClass('over');
},`enter code here`
out: function(){
$(this).removeClass('over').addClass('out');
},
drop: function(ev, ui){
//var answer = confirm('Delete this item?');
var theTitle = $(ui.draggable).attr("title");
$(this).html("<u>"+theTitle+"</u><br/> is deleted!");
}
});
});
</script>
<body>
<div id="trash" class="out">
<span>Trash</span>
</div>
<div id="sourcefields">
<div class="srcfield" title="First Name"><span>First Name</span></div>
<div class="srcfield" title="Last Name"><span>Last Name</span></div>
<div class="srcfield" title="Age"><span>Age</span></div>
</div>
</body>