Having some trouble with my Javascript and JQuery skills, so bear with me. I've set up a gallery of images where users can drag and drop them into a designated drop zone. Everything works fine when dragging an image from the gallery to the drop zone and back, but if I try to drag an image within the gallery itself, it disappears instead of reverting back. The console shows that the original image's display property is set to "none" even though I didn't specify this anywhere in my code (I suspect $(this).hide() is causing this). I've tried adjusting the CSS manually without success. Am I overlooking something? Happy to provide more details if needed. Unfortunately, it's too complex to create a JSFiddle for demonstration purposes. Thanks!
To clarify, I need a cloned image for dragging out of the scrollable div. However, using $(this).hide() to avoid having multiple copies seems to be the root of the issue. Ideally, I want the dragged image to revert to its original position inside the gallery rather than disappearing altogether.
$('.item').draggable({
revert: "invalid",
helper: 'clone',
start: function () {
$(this).hide();
$('.item').css('cursor', 'grabbing');
},
stop: function () {
$('.item').css('cursor', 'grab');
}
});
$("#arena").droppable({
accept: '*',
drop: function (event, ui) {
$('.item').css('cursor', 'grab');
var parentOffset = jQuery('#arena').offset();
if(!ui.draggable.hasClass("newItem")) {
var new_item = $(ui.helper).clone().removeClass('item').addClass("newItem");
new_item.draggable({
revert: 'invalid',
start: function () {
$(ui.helper).hide();
$('.newItem').css('cursor', 'grabbing');
},
stop: function () {
$('.newItem').css('cursor', 'grab');
}
}).css({
'position': 'absolute',
'left': (ui.position.left - parentOffset.left) + 'px',
'top': (ui.position.top - parentOffset.top) + 'px',
});
$(this).append(new_item);
gallery_count--;
}