Question

我目前正致力于构建CMS。在此CMS中，有一个构建器页面，您可以在其中将元素拖放到画布中以创建网站。我使用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太多，无法在此处发布...

Draggable 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 draggable options

z-index

添加CSS：pointer-events：

* { 指针事件：auto！important; -webkit-user-drag：auto！important; }

Answer 1

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

模板已更改，因此删除了所需的类.scroll-container。这是可拖动克隆附加到的类，因此无法附加任何内容。

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

非常感谢评论员!!!

拖动时没有鬼影？

问题

我尝试过的事情

1 个答案: