I figured out a solution for those who might come across this same issue (the pesky clone). I created a flag variable called “moved” that’s initialized to false in order to pass a condition (see below code) when it’s dragged within the gallery so it stays visible. When the image is dropped on the dropzone, moved is set to true so that the original image is hidden and not still viewable in the gallery. I then re-initialize it to false when I drag another image so it cycles the same way.

var moved = false;
    $(function() {
        $('.item').draggable({
            helper: 'clone',
            revert: "invalid",
            start: function () {
                moved = false;
                $(this).hide();
                $('.item').css('cursor', 'grabbing');
            },
            stop: function (event, ui) {
                    if ((ui.helper.hasClass("item") && moved == false)) {
                        $(this).show();
                    }

                $('.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")) {
                    moved = true;
                    var new_item = $(ui.helper).clone().removeClass('item').addClass("newItem");

I’m a little bit new to Javascript and JQuery so forgive me for butchering this explanation. I’ve created a gallery of images in which the user can drag and drop into a dropzone. I’m using the revert option so images that aren’t initially placed in the dropzone go back to their original position (using revert: ‘invalid’). Now, when I drag an image from my “gallery” (which is a scrollable div) to the dropzone, then out of the dropzone, it goes back to its position in the dropzone perfectly. However, if I drag an image from the gallery within the gallery and not into the dropzone, it should revert back to its original position in the gallery. Instead, it reverts back and then disappears completely! I inspected this in my console and it creates the css “display” of my original image as “none” even though I never specified this style option (I believe $(this).hide() is what prompts that). I tried manually changing this in my CSS but it didn’t work. Am I missing something? Let me know if I can provide any clarification. I can’t create a JSFiddle because there are too many project files. Thanks!

(Just to clarify, I need a cloned image so I can drag it out of my scrollable div, and I use $(this).hide() so I don’t have unlimited copies of a dragged image, but it’s also what seems to be causing the problem). Basically, I’d like it so that if my image is initially dragged inside the gallery, it should revert back to its position inside the gallery, but right now it’s reverting then disappearing.

$('.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--;
                }