Question

我尝试使用HTML5拖放和position: fixed来拖动屏幕左侧固定位置的菜单中的元素。

以下代码在Safari和Firefox中运行良好，但是当我在Chrome中尝试它时，滚动后，＆＃34; ghost＆＃34;从拖放API生成的图像不可见。如果你向右滚动，你可以拖动鬼影的一部分，这表明它以某种奇怪的方式被剪辑。将left div的位置设置为absolute可以正常工作，但如果我能帮助它，我宁愿不使用JS来计算定位。

我确实为此创建了一个小提琴，但它在Safari和Firefox中运行了一些其他非常奇怪的问题（虽然它确实在Chrome中显示了问题）： https://jsfiddle.net/e4fvrr5y/

以下是我用来测试的完整代码：

<!doctype html>
<head>
    <style>
        body {
            display: flex;
        }
        .left {
            width: 200px;
            height: 200px;
            background-color: #0f0;
            position: fixed;
        }
        .right {
            margin-left: 200px;
            width: 200px;
            height: 3000px;
            background: linear-gradient(white, black);
        }

        .draggable {
            background-color: #00f;
            padding: 20px;
            color: #fff;
            cursor: pointer;
        }

    </style>
</head>
<body>
    <div class="left">
        <div class="draggable" draggable="true" ondragstart="drag(event)">Draggable element</div>
    </div>
    <div class="right">
    </div>

    <script>
        function drag(ev) {
            ev.dataTransfer.setData("text", "foo");
        }
    </script>
</body>
</html>

在线搜索我发现了以下针对Chromium的错误报告：Issue 605119

这似乎是相关的，因为它谈论的是位置相对是罪魁祸首。但是这已经有近两年的历史了，而且据报道已经修复了，所以到目前为止可能已经合并到了Chrome中。有没有其他人遇到过这个问题，如果有，你采取了哪些措施来解决它？

Answer 1

这是chrome 63.0.3223.0中出现的错误（请参阅此issue）。

根据问题跟踪器，这应该在几周内在下一个chrome稳定版本（64.x）中修复。

请注意，此修复程序已在Chrome Canary中提供。

更新25-01-2018

Chrome 64现已推出

Answer 2

当拖动操作开始时，Chrome要求拖动的元素对浏览器可见。我遇到了同样的问题，我通过克隆可拖动元素将其附加到正文并将其放置在dragstart上固定容器中的可拖动元素上来解决它。接下来，我将克隆设置为元素dragImage。最后，我删除了dragend上的克隆。我在这里使用jQuery是我的修复希望它有所帮助：

var $clone = null;
document.addEventListener( 'dragstart',  function( ev ) {
    var $el = $( ev.target );
    $clone = $el.clone(); 
    $clone.css( {
        position: 'absolute',
        top: $el.offset().top,
        left: $el.offset().left,
        width: $el.width()
    } );
    $('body').append( $clone )
    ev.dataTransfer.setDragImage( $clone[ 0 ], 0, 0);
} );

document.addEventListener( 'dragend', function( ev ){
    $clone.remove();
    $clone = null;
} );

使用粘滞/固定位置时，Chrome会切断重影

2 个答案: