javascript - 拖动时没有重影图像？

Question

我目前正在构建 CMS。在此 CMS 中有一个构建器页面，您可以将元素拖放到 Canvas 中以创建网站。我使用 jQuery 的插件(可拖动、可放置、可排序)来扩展功能并使所有交互成为可能。

今天我的一位同事注意到拖动时的重影不再出现。我确实有一个可以正常工作的系统版本，但这个版本已经有一个月了，在尝试了几个小时后，我似乎找不到导致此问题的原因。

请注意，一个月内发生了很多变化，我不知道是什么导致图像在拖动时显示？是 CSS/JS/HTML 吗？

侧边栏的 HTML (+PHP) 片段:

<li class="nav-parent">
        <a>
            <i class="glyphicon glyphicon-home"></i>
            <span><?php echo 'basic_elements'; ?></span>
        </a>
        <ul class="children" style="display: none;">
            <li class="ab-nav-sub">
                <a class="left-panel-sub-container">
                    <i class="indicator fa fa-caret-right"></i>
                    <?php echo $aTranslator['elements']; ?>
                </a>
                <div class="_elements" style="display: none;">
                    <div id="ab-nav-el_5" class="ab-nav-element ui-draggable information-popover" data-original-title="element_image_text_basic" title="<?php echo 'element_image_text_basic'; ?>" data-content="<div class='sidebar-tooltip'><strong>Plaatje/Tekst</strong><br>Veld voor een plaatje met tekst.</div><img src='tm_textimage.png'>">
                        <img src="/tm_textimage.png" draggable="true" ondragstart="">
                        <h2><?php echo $aTranslator['element_image_text_basic']; ?></h2>
                    </div>
                    <div id="ab-nav-el_7" class="ab-nav-element ui-draggable information-popover" data-original-title="element_video_text_basic" title="<?php echo'element_video_text_basic'; ?>" data-content="<div class='sidebar-tooltip'><strong>Video/Tekst</strong><br>Veld voor een video met tekst.</div><img src='tm_textvideo.png'>">
                        <img src="/tm_textvideo.png" draggable="true" ondragstart="">
                        <h2><?php echo $aTranslator['element_video_text_basic']; ?></h2>
                    </div>

太多文件中的 CSS 太多，无法在此处发布...

可拖动的 JS:

 $('.ab-nav-element').draggable({
            appendTo: '.scroll-container',
            revert: 'invalid',
            cursor: "move", 
            distance: 50,
            revertDuration: 250,
            helper: 'clone',
            start: function(){
                $('.el-empty').addClass('el-receptive');
                elementName = $(this).data('original-title');
                elementTitle = $(this).attr('title');
                if($('.dashboard_container').children('.ab-builder-el.el-empty').length == 1){
                    $('.el-empty').addClass('huge');
                    $('.alert.alert-info').addClass('hidden');
                }
                //console.log(elementTitle);
            },
            stop: function(){
                $('.el-receptive').removeClass('el-receptive');
                elementName = null;
                $('.el-empty').removeClass('huge');
                $('.alert.alert-info').removeClass('hidden');
            }
        });

问题

任何人都可以给我关于在哪里寻找更改的建议吗？我没有对 jQuery 插件的工作方式进行任何更改，因此这不应该是问题的原因。

CSS 中是否有我可以尝试覆盖的样式属性？

欢迎任何建议，我很乐意今天解决这个问题......

我尝试过的事情

• 在 jQuery 可拖动选项中添加选项 z-index

• 添加 CSS:指针事件:

  *{ 指针事件:自动!重要； -webkit-user-drag:自动!重要；}

Answer 1

这似乎是一个愚蠢的错误:

模板已更改，因此所需的类.scroll-container被删除。这是可拖动克隆被附加到的类，因此没有什么可以附加到的。

将类更改为可用元素后，例如body克隆体再次出现。

非常感谢评论者!!!