JQuery'revert'使图像消失

Question

我对 Javascript 和 JQuery 有点陌生，所以请原谅我扼杀了这个解释。我创建了一个图像库，用户可以在其中拖放到放置区。我正在使用 revert 选项，因此最初未放置在 dropzone 中的图像会返回到其原始位置（使用 revert: 'invalid'）。现在，当我将图像从我的“图库”（这是一个可滚动的 div）拖到放置区，然后从放置区出来时，它会完美地回到放置区中的位置。但是，如果我将图片从图片库中在 库中拖入而不是拖入放置区，则它应该恢复到其在图库中的原始位置。相反，它会恢复原状，然后完全消失！我在控制台中对此进行了检查，即使我从未指定此样式选项（我相信 $(this).hide() 会提示），它也会将原始图像的 css“显示”创建为“无”。我尝试在我的 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

我为那些可能遇到同样问题的人找到了一个解决方案（讨厌的克隆）。我创建了一个名为“moved”的标志变量，该变量被初始化为 false，以便在将其拖动到图库中时传递一个条件（参见下面的代码），使其保持可见。当图像被拖放到 dropzone 上时，moved 设置为 true，以便原始图像被隐藏并且在图库中仍然不可见。然后，当我拖动另一个图像时，我将其重新初始化为 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");