Javascript HTML5拖放设置绘图
我试图在拖动图像时设置光标的拖动图像,但是当我开始拖动时,我看不到图像,我是否做错了什么Javascript HTML5拖放设置绘图,javascript,html,event-handling,draggable,Javascript,Html,Event Handling,Draggable,我试图在拖动图像时设置光标的拖动图像,但是当我开始拖动时,我看不到图像,我是否做错了什么 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.originalE
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);
这个。$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。根据我所调查的内容。您需要将图像附加到文档中。在Firefox中,您可以安全地设置一个位置:绝对然后顶部:-9999px。然而,在Chrome中,页面上也会有图像。诀窍是把它藏在另一个绝对位置的东西后面
也许Chrome还有更好的方法,我仍在努力寻找更好的解决方案。有一种方法可以解决这个问题。使用创建包装器div
position:absolute, width:0px; Height:0px; top:0px; right:0px
并使用在dragstart事件上创建控件
position:relative
将控件绑定到包装器并将控件设置为setDragImage。添加dragIcon.getElement().SetDragable(Element.Dragable_TRUE);