控制HTML5拖放效果的外观 [英] Controlling the appearance of the HTML5 drag and drop effect

问题描述

有没有办法使用HTML5拖放API来控制拖曳的外观？

Is there a way to control the appearance of "what you are dragging" using the HTML5 Drag and Drop APIs?

通常，无论HTML元素是可拖动的，什么是变成半透明，并按照你的光标，直到你停止/停止。我想要控制，以便我可以从一个元素的任何地方开始拖动，但是当你实际开始拖动时，我只能有一个小的图像跟随光标，恰好在光标所在的位置。

Normally, whatever HTML element is draggable is what becomes semi-transparent and follows your cursor until you stop/drop. I'd like to control that so that I can start my drag from anywhere inside an element, but when you actually start dragging, I can have only a small image follow the cursor, exactly where the cursor is.

实际的例子是：要拖动的东西的列表，每个都是一个小图像，一些文本的名称将被拖动到它的一边。我希望能够通过图像或文本在元素中的任意位置开始拖动，但只有图像跟随您的光标，并直接在光标下方，而不是从您开始拖动它的位置偏移。

The practical example is: A list of things to drag, each is a small image and some text for the name of the thing you will be dragging to side of it. I'd like to be able to start my drag anywhere in the element over the image or text, but then only the image follows your cursor, and directly under the cursor, rather than offset from where you started dragging it.

我可以想到几种方法来欺骗它（一个隐藏的元素，出现在鼠标光标的位置，当你开始拖动，是你实际拖动），或者诉诸于经典

I can think of a few ways to trick it (a hidden element that appears where you mouse cursor is, when you start to drag and is what you actually drag), or resort to classic Javascript drag and drop.

谢谢

推荐答案

我觉得 .setDragImage（element，x，y）; 可能正在寻找。

function handleDragStart(e) {
    var dragIcon = document.createElement('img');
    dragIcon.src = 'http://...';
    dragIcon.width = 100;
    e.dataTransfer.setDragImage(dragIcon, x, y);
}

this.addEventListener('dragstart', handleDragStart, false);

这里的示例： jsfiddle.net/cnAHv/

这篇关于控制HTML5拖放效果的外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！