Question

我在使用HTML5拖放时遇到问题。这是一个CodePen example，其中包含一个最小拖动示例来说明问题。

问题是如果我们有一个容器overflow: hidden，部分内容可能看起来不完整，所以当我们将它拖到容器外时，浏览器创建的重影图像看起来不完整而不是内容显示完整的元素。

在该示例中，有两个灰色框，其中一个被溢出隐藏，因此当您拖动它时，生成的重影图像与元素的完整形状不对应。有什么方法可以强制元素在拖动父项溢出时隐藏的拖动对象时显示完整的重影图像？

非常感谢

的解

最后，感谢freestock.tk给出的线索，我找到了一个适用于该示例的解决方案。诀窍是使用position: absolute但是在附加到正文的克隆对象中并且对用户隐藏。我们需要在拖动事件中添加以下内容：

c2.addEventListener('dragstart', event => {

    // Here we clone the element.
    let clonedElement =  c2.cloneNode(true);

    // And we add our class with position absolute to render it
    // hidden from the user.
    clonedElement.classList.add('cloned');

    // Then we attach the element to the body.
    document.body.appendChild(clonedElement);

    // And we pass this element to drag image of the drag event
    // using the position of the click of the mouse to set it.
    event.dataTransfer.setDragImage(clonedElement, event.offsetX, event.offsetY);

    // And finally we remove the cloned element.
    window.setTimeout(() => clonedElement.parentNode.removeChild(clonedElement), 350);
});

cloned类包含以下内容：

.cloned
    position absolute
    width 100px
    left 1000px

这是一个solution工作的CodePen。

Answer 1

我确实在拖拽事件中添加了绝对位置：

let c1 = document.getElementById('c1');
let c2 = document.getElementById('c2');

c2.addEventListener('mousedown', event => {
  event.currentTarget.style.position = 'absolute';
  event.currentTarget.style.margin = "10px";
});

c2.addEventListener('dragstart', event => {
  event.currentTarget.style.position = 'absolute';
  event.currentTarget.style.margin = "10px";
  console.log(event.currentTarget);
});

c2.addEventListener('dragend', event => {
  event.currentTarget.style.position = 'initial';
});

link：CODEPEN

当对象被溢出部分隐藏时，拖放显示错误的重影图像

1 个答案: