Question

我有一个简单的html：

<!DOCTYPE HTML>
<html>
<head>
<style>
    .drag-icon{height: 100px; width: 100px; background-color: red}
</style>
<script>
    function drag(ev) {
        var drag_icon = document.createElement("div")
        drag_icon.className = "drag-icon"

        ev.dataTransfer.setData("text/html", drag_icon);
    }
</script>
</head>
<body>
    <div style="height: 100px; width: 100px; background-color: #CCC" draggable="true" ondragstart="drag(event)">
        Hellooww world
    </div>

</body>
</html>

这里当我拖动div时，拖动我的div正在被拖动。我想要的是当我拖动div时，拖动div应该更改为drag_icon。

我该怎么做？

Answer 1

您应该使用dataTransfer.setDragImage而不是setData，还需要将元素附加到DOM，否则在拖动时您将无法看到元素。拖动开始事件应该像这样改变：

var drag = function(e,node) {
   var drag_icon = document.createElement("div")
   drag_icon.className = "drag-icon";
   drag_icon.style.position = "absolute";
   drag_icon.style.top = "-100px";
   drag_icon.style.right = "0px";
   document.body.appendChild(drag_icon);
   e.dataTransfer.setDragImage(drag_icon, 0, 0);  
}

请记住，您应该将元素附加到用户不可见的屏幕的一部分，因此将其放置在窗口的一侧，首先我将其放置在最右边，但它会导致身体滚动，因此隐藏溢出-x那很好。

body{
  overflow-x:hidden;
}

然后我把位置改为远端，用这种方法就没有必要改变体型了

有一个工作小提琴Here

了解更多信息并完成演练，请查看Setting a custom ghost image when using HTML5 drag and drop

拖动更改拖动图像或图标的html5

1 个答案: