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

Closed. This question needs debugging details。它当前不接受答案。
                        
                    
                
            
        
            
        
                
                    
                
            
                
                    想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                
                    4年前关闭。
            
        

    

我在使用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。

最佳答案

我也确实在拖动事件上添加了绝对位置：

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';
});

链接：CODEPEN