jQuery'revert'使图像消失

问题描述 投票:0回答:1

我对Javascript和JQuery有点陌生,因此请原谅我为您解释这道理。我创建了一个图片库,用户可以在其中拖放到拖放区。我正在使用还原选项,因此最初未放置在放置区中的图像会返回其原始位置(使用还原:“无效”)。现在,当我将图像从“图库”(可滚动的div)拖动到放置区,然后离开放置区时,它完美地回到了放置区中的位置。但是,如果我从图库within中拖动图像而不是将其拖到放置区中,它将应该还原到其在图库中的原始位置。相反,它会还原并完全消失!我在控制台中进行了检查,即使我从未指定此样式选项(我相信$(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--;
                }
javascript html jquery css
1个回答
0
投票

我为可能遇到相同问题的人(讨厌的克隆)找到了解决方案。我创建了一个名为“ moved”的标志变量,该变量被初始化为false,以便在将其拖动到图库中以使其保持可见状态时通过条件(请参见下面的代码)。当图像放在放置区上时,moveed设置为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");
© www.soinside.com 2019 - 2024. All rights reserved.