[英]HTML5 drag and drop setDragImage
我试图在拖动图像时设置光标的拖动图像,但是当我开始拖动图像时却看不到图像,这是在做错什么吗?
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中的II外观,我不认为正在创建新的img。
从我一直在调查。 您需要在文档中附加图像。 在Firefox中,您可以安全地设置位置:绝对位置,然后顶部位置:-9999px。 但是,在Chrome中,页面上也会有图像。 诀窍是将其隐藏在另一个绝对位置的后面。
也许Chrome有更好的方法,但我仍在尝试寻找更好的解决方案。
有一种破解方法。 创建一个包装器div
position:absolute, width:0px; Height:0px; top:0px; right:0px
并使用以下命令在dragstart事件上创建控件
position:relative
将控件绑定到包装器,并将控件设置为setDragImage。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.