Есть ли способ контролировать внешний вид "того, что вы перетаскиваете", используя API-интерфейсы перетаскивания HTML5?
Обычно любой HTML-элемент перетаскивается, что становится полупрозрачным и следует за вашим курсором, пока вы не остановитесь/не упадете. Я хотел бы контролировать это, чтобы я мог начать перетаскивание из любого места внутри элемента, но когда вы на самом деле начинаете перетаскивание, у меня может быть только небольшое изображение, следуя курсору, точно там, где находится курсор.
Практический пример: список вещей для перетаскивания, каждое из которых представляет собой небольшое изображение и некоторый текст для названия вещи, которую вы будете перетаскивать в сторону. Я бы хотел, чтобы можно было начать перетаскивание в любом месте элемента над изображением или текстом, но тогда только изображение следует за вашим курсором и непосредственно под курсором, а не смещено от того, куда вы его перетащили.
Я могу придумать несколько способов обмануть его (скрытый элемент, который появляется там, где вы наводите указатель мыши, когда вы начинаете перетаскивать, и это то, что вы на самом деле перетаскиваете), или прибегают к классическому перетаскиванию Javascript.
Спасибо
Я думаю, что .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/
К сожалению, похоже, что спецификация была построена так, чтобы поддерживать согласованное нативное поведение по настройке в браузере.
Мы провели кучу исследований и обобщили наши результаты здесь:
https://www.inkling.com/engineering/native-html5-drag-drop/
Длинным и коротким, однако, является то, что использование помощника (например, пользовательский интерфейс jQuery) или сворачивание ваших собственных обычно предпочтительнее, если вам нужно сделать что-то сложное.
Тем не менее, если вы действительно хотите использовать собственное поведение, а setDragImage() не подходит, существует несколько альтернатив.
Один особенно экстравагантный подход может включать захват рендерера для создания скриншота (!) элемента по своему стилю, а затем его вставки через URI данных.
Смотрите: http://cburgmer.github.io/rasterizeHTML.js/jsconfeu2013/#/step-4
Благоразумным подходом было бы просто абсолютно позиционировать элемент призрак, чтобы следовать за мышью. Но это возвращает нас к написанию кода, который повторно реализует основные части поведения перетаскивания вне API.
Посмотрите эту часть пользовательского интерфейса jQuery. Это позволяет легко создавать призрак перетаскиваемого элемента, в то время как оригинал остается в исходном местоположении. Вы также можете указать пользовательский "помощник", чтобы следовать курсору.
В соответствии с этим вопросом в StackOverflow мы не можем изменить стиль перетаскиваемого объекта при его перетаскивании, но мы можем установить изображение перетаскивания. Это приведет к появлению изображения при перетаскивании объекта-призрака.
event.dataTransfer.setDragImage(document.getElementById('div2'),50,50);
Объяснение:
on dataTransfer мы вызываем функцию setDragImage(), в которой мы передаем идентификатор div и указываем положение, где будет отображаться изображение, когда мы начнем его перетаскивать.
Подробнее о dataTransfer здесь:
Разработчики Mozilla - DataTransfer