Question

在我的应用程序中，我有一个图像列表，我将其拖放到画布上。我正在拖动带有标题的锚标记，以及我在属性中需要的细节。这很有效。我想在拖动时显示缩略图。这对我不起作用。

我正在使用

jsFiddle作为指南。基于此，我有以下HTML：

<a href="#" draggable="true" ondragstart="DIA.setDragTarget(event)">The drag test object</a>

这会调用以下方法（我已经跟踪了它，它被称为）

this.setDragTarget = function(event)
{
    var dragIcon = document.createElement('img');
    dragIcon.src = 'http://jsfiddle.net/favicon.png';
    dragIcon.width = 100;
    e.dataTransfer.setDragImage(dragIcon, -10, -10);
}

这显然是从小提琴中复制出来的。它不起作用，它仍然显示文本元素。但是，这个小提琴，我已经剥离到不使用CSS，以防有什么东西在那里，正在工作。我也用锚标记测试它，我发现小提琴和我的代码之间没有区别。以下是Chrome在元素上显示的所有属性（我想知道这里有什么问题吗？）

-webkit-user-drag: element;
-webkit-user-select: none;
border-bottom-color: rgb(66, 139, 202);
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(66, 139, 202);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(66, 139, 202);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(66, 139, 202);
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(66, 139, 202);
cursor: auto;
display: inline;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
height: auto;
line-height: 20px;
outline-color: rgb(66, 139, 202);
outline-style: none;
outline-width: 0px;
text-decoration: none solid rgb(66, 139, 202);
width: auto;

简而言之，我可以在网上找到的每个样本都可以使用，但没有提到任何可以阻止这种工作的样式，并且它们都不能在我的实际代码中运行

由于

Answer 1

不需要任何样式。在拖动时，放置draggable属性将为您提供缩略图效果。文档模式也应该是HTML 5。

HTML5拖放 - 无法设置拖动时显示的图像

1 个答案: