JQuery 'revert' заставляет изображение исчезать

Question

Я немного новичок в Javascript и JQuery, так что простите меня за то, что я вырезал это объяснение. Я создал галерею изображений, в которых пользователь может перетаскивать их в зону размещения. Я использую опцию возврата, чтобы изображения, которые изначально не помещались в зону перетаскивания go, возвращались в исходное положение (с помощью revert: 'invalid'). Теперь, когда я перетаскиваю изображение из моей «галереи» (которая является прокручиваемым элементом div) в dropzone, а затем из dropzone, оно идеально возвращается в свою позицию в dropzone. Однако, если я перетащу изображение из галереи в галерею, а не в зону перетаскивания, оно должно вернуться в исходное положение в галерее. Вместо этого он возвращается обратно, а затем полностью исчезает! Я проверил это на своей консоли, и он создает css «отображение» моего исходного изображения как «нет», хотя я никогда не указывал этот параметр стиля (я считаю, что $ (this) .hide () - это то, что подсказывает это). Я попытался вручную изменить это в моем CSS, но это не сработало. Я что-то упускаю? Дайте мне знать, если я могу дать какие-либо разъяснения. Я не могу создать JSFiddle, потому что файлов проекта слишком много. Спасибо!

(Чтобы уточнить, мне нужно клонированное изображение, чтобы я мог перетащить его из прокручиваемого div, и я использую $ (this) .hide (), чтобы у меня не было неограниченного количества копий перетащил изображение, но, похоже, это и является причиной проблемы). В принципе, мне бы хотелось, чтобы, если мое изображение изначально перетаскивалось внутри галереи, оно возвращалось на свое место внутри галереи, но сейчас оно возвращается, а затем исчезает.

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

Answer 1

Я нашел решение для тех, кто может столкнуться с этой же проблемой (надоедливый клон). Я создал переменную флага под названием «перемещено», которая инициализируется значением false, чтобы передать условие (см. Код ниже), когда оно перетаскивается в галерее, чтобы оно оставалось видимым. Когда изображение перетаскивается в зону перетаскивания, для параметра «перемещено» устанавливается значение «истина», поэтому исходное изображение скрывается и не отображается в галерее. Затем я повторно инициализирую его как false, когда перетаскиваю другое изображение, чтобы оно циклически повторялось.

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");