0

我试图在拖动图像时设置光标的拖动图像，但是当我开始拖动时我没有看到图像，我做错了什么吗？

 var dragIcon = document.createElement("img");
 var src = this.$el.find("img").attr("src");
 dragIcon.src = src.replace("http://domain.dev", "");
 dragIcon.width = 100;
 console.log(dragIcon);
 e.originalEvent.dataTransfer.setDragImage(dragIcon, -10, -10);

this.$el看起来像这样

<div class="person-card column" draggable="true" id="95">
        <img class="person-card-image" src="/profile_pictures/default.png">
        <div class="card-header-title single">
            <a href="/people/person/95">John Doe</a>
        </div>
        <div class="person-card-subtitle">

                Linked

        </div>
        <!--<div class="person-card-invite is-sent">
            <a href="#">Invite</a>
        </div>-->
    </div>

我看不出这不起作用的任何原因。但是我注意到我在 dom 中查看我不认为正在创建新的 img。

4

2 回答 2

1

从我一直在调查的情况来看。您需要在文档中附加图像。在 Firefox 中，您可以安全地设置 position: absolute 然后 top: -9999px。但是，在 Chrome 中，您也会在页面上看到图像。诀窍是将它隐藏在另一个绝对位置的东西后面。

也许 Chrome 有更好的方法，我仍在努力寻找更好的解决方案。

于 2013-12-13T23:40:42.250 回答
0

有一种破解方法。创建一个包装器 div

position:absolute, width:0px; Height:0px; top:0px; right:0px

并创建对 dragstart 事件的控制

position:relative

将控件绑定到包装器并将控件设置为 setDragImage。

于 2014-07-25T15:48:57.820 回答