Управление появлением эффекта перетаскивания HTML5

Есть ли способ контролировать внешний вид "того, что вы перетаскиваете", используя API-интерфейсы перетаскивания HTML5?

Обычно любой HTML-элемент перетаскивается, что становится полупрозрачным и следует за вашим курсором, пока вы не остановитесь/не упадете. Я хотел бы контролировать это, чтобы я мог начать перетаскивание из любого места внутри элемента, но когда вы на самом деле начинаете перетаскивание, у меня может быть только небольшое изображение, следуя курсору, точно там, где находится курсор.

Практический пример: список вещей для перетаскивания, каждое из которых представляет собой небольшое изображение и некоторый текст для названия вещи, которую вы будете перетаскивать в сторону. Я бы хотел, чтобы можно было начать перетаскивание в любом месте элемента над изображением или текстом, но тогда только изображение следует за вашим курсором и непосредственно под курсором, а не смещено от того, куда вы его перетащили.

Я могу придумать несколько способов обмануть его (скрытый элемент, который появляется там, где вы наводите указатель мыши, когда вы начинаете перетаскивать, и это то, что вы на самом деле перетаскиваете), или прибегают к классическому перетаскиванию Javascript.

Спасибо

ОТВЕТЫ

Ответ 1

Я думаю, что .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/

Ответ 2

К сожалению, похоже, что спецификация была построена так, чтобы поддерживать согласованное нативное поведение по настройке в браузере.

Мы провели кучу исследований и обобщили наши результаты здесь:

https://www.inkling.com/engineering/native-html5-drag-drop/

Длинным и коротким, однако, является то, что использование помощника (например, пользовательский интерфейс jQuery) или сворачивание ваших собственных обычно предпочтительнее, если вам нужно сделать что-то сложное.

Тем не менее, если вы действительно хотите использовать собственное поведение, а setDragImage() не подходит, существует несколько альтернатив.

Один особенно экстравагантный подход может включать захват рендерера для создания скриншота (!) элемента по своему стилю, а затем его вставки через URI данных.

Смотрите: http://cburgmer.github.io/rasterizeHTML.js/jsconfeu2013/#/step-4

Благоразумным подходом было бы просто абсолютно позиционировать элемент призрак, чтобы следовать за мышью. Но это возвращает нас к написанию кода, который повторно реализует основные части поведения перетаскивания вне API.

Ответ 3

Посмотрите эту часть пользовательского интерфейса jQuery. Это позволяет легко создавать призрак перетаскиваемого элемента, в то время как оригинал остается в исходном местоположении. Вы также можете указать пользовательский "помощник", чтобы следовать курсору.

Ответ 4

В соответствии с этим вопросом в StackOverflow мы не можем изменить стиль перетаскиваемого объекта при его перетаскивании, но мы можем установить изображение перетаскивания. Это приведет к появлению изображения при перетаскивании объекта-призрака.

event.dataTransfer.setDragImage(document.getElementById('div2'),50,50);

Объяснение:

on dataTransfer мы вызываем функцию setDragImage(), в которой мы передаем идентификатор div и указываем положение, где будет отображаться изображение, когда мы начнем его перетаскивать.

Подробнее о dataTransfer здесь: Разработчики Mozilla - DataTransfer