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

Question

Есть ли способ контролировать внешний вид «что вы перетаскиваете» с помощью API-интерфейса перетаскивания HTML5?

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

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

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

Благодаря

Answer 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/

Answer 2

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

Answer 3

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

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

Объяснение:

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

Подробнее о dataTransfer здесь: Mozilla Developers - DataTransfer

Answer 4

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

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

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

Длинные и короткие, однако, является то, что с помощью помощника (как JQuery UI) или добавить собственные, как правило, предпочтительно, если вам нужно сделать что-нибудь сложное.

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

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

См: http://cburgmer.github.io/rasterizeHTML.js/jsconfeu2013/#/step-4

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