I'm trying to build a drag-drop system where images can be dragged into a particular div. Because the images are in a scroller, I have to use clone for the draggables. The problem I have is that the 'drop' event doesn't seem to be fired when I drag the image onto the div. I've searched online, but haven't found a solution which works.
I have the following:
$( "#droppable" ).droppable({
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
alert('ok');
}
});
$( ".draggable" ).draggable({
helper: "clone",
scroll: false
});
so that when the .draggable element is dropped on the #droppable div, I should see an alert. The droppable does get the activeClass, so it's getting that far, but when I drop the image, nothing happens - it just disappears.
The html is:
For the droppable (it's in a scrollable div, using the jQuery ui scrollable):
<div class="scrollable" id="scrollable">
<div id="scrollable-items" class="items">
<div id="scrollerDiv_1">
<div>
<div id="droppable" class="droppable ui-droppable">
<div class="ImageArea"></div>
<div class="CaptionArea">Drag a photo or video into the box above to create a new frame</div>
</div>
</div>
</div>
</div>
</div>
For the draggable images:
<div id="EditMain">
<div id="libraryMain">
<div id="my-asset-list" class="assetList">
<div class="listItem draggable scroll-content-item ui-draggable">
<span class="assetItem">
<img src="xxx"/>
</span>
</div>
<div class="listItem draggable scroll-content-item ui-draggable">
<span class="assetItem">
<img src="xxx"/>
</span>
</div>
<div class="listItem draggable scroll-content-item ui-draggable">
<span class="assetItem">
<img src="xxx"/>
</span>
</div>
</div>
</div>
</div>
in the drop function, you need to append the dropped item into the container:
drop: function(event, ui) {
$('#mycontainer').append(ui.draggable);
return true;
}
The return value indicates whether the drop was successful or not.