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.
source to share
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.
source to share
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>
source to share