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

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

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

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

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

спасибо

18
appearance drag-and-drop draggable html html5

4 ответов

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

21

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

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

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

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

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

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

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

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

8

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

2

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

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

объяснение:

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

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

2