Sterowanie wyglądem efektu przeciągania i upuszczania HTML5

Question

Czy istnieje sposób kontrolowania wyglądu "elementów, które przeciągasz" za pomocą interfejsów API przeciągania i upuszczania HTML5?

Normalnie, niezależnie od tego, czy element HTML jest przeciągalny, staje się półprzezroczysty i podąża za kursorem, aż do zatrzymania/upuszczenia. Chciałbym to kontrolować, aby móc rozpocząć przeciąganie z dowolnego miejsca wewnątrz elementu, ale kiedy faktycznie zaczniesz przeciągać, mogę mieć tylko mały obraz podążający za kursorem, dokładnie tam, gdzie znajduje się kursor.

Praktyczny przykład: Lista rzeczy do przeciągnięcia, każda jest małym obrazem i tekstem dla nazwy rzeczy, którą przeciągniesz na jej stronę. Chciałbym móc rozpocząć przeciąganie w dowolnym miejscu elementu nad obrazem lub tekstem, ale wtedy tylko obraz podąża za kursorem i bezpośrednio pod kursorem, zamiast przesuwać go od miejsca, w którym zacząłeś go przeciągać.

Potrafię wymyślić kilka sposobów, aby go oszukać (ukryty element, który pojawia się w miejscu, w którym znajduje się kursor myszy, gdy zaczniesz przeciągać i jest to, co faktycznie przeciągasz) lub uciekać się do klasycznego przeciągania i upuszczania Javascript.

Dzięki

Answer 1

myślę .setDragImage(element, x, y); może być to, czego szukasz.

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); 

Przykład tutaj: jsfiddle.net/cnAHv/

Answer 2

Spójrz na this części jQuery UI. Pozwala łatwo utworzyć ducha przeciągniętego elementu, podczas gdy oryginał pozostaje w pierwotnej lokalizacji. Możesz także określić niestandardowego "pomocnika", aby podążać za kursorem.

Answer 3

Zgodnie z this question na StackOverflow, nie możemy zmienić stylu przeciągalnego obiektu podczas jego przeciągania, ale możemy ustawić obraz przeciągania. Spowoduje to pojawienie się obrazu podczas przeciągania obiektu widmowego.

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

Objaśnienie:

na dataTransfer nazywamy setDragImage() funkcję w których mijamy identyfikator div i dać pozycję, gdzie pojawi się obraz, gdy zaczniemy przeciągając go.

Zobacz więcej o dataTransfer tutaj: Mozilla Developers - DataTransfer

Answer 4

Niestety, wygląda na to spec został zbudowany, aby sprzyjać konsekwentne zachowanie rodzimej nad dostosowywanie w przeglądarce.

Zrobiliśmy kilka badań i podsumować nasze odkrycia tutaj:

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

Długie i krótkie jest jednak to, że za pomocą pomocnika (jak jQuery UI) lub toczenia własne jest generalnie korzystne, gdy musisz zrobić wszystko, co wyrafinowane.

Mimo to, jeśli naprawdę chcesz użyć natywnego zachowania, a setDragImage() nie jest wystarczający, istnieje kilka alternatyw.

Szczególnie ekstrawaganckie podejście może polegać na przejęciu renderera w celu utworzenia zrzutu ekranu (!) elementu tak, jak chcesz, aby był stylizowany, a następnie wstawiany za pomocą identyfikatora URI danych.

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

saner rozwiązaniem byłoby po prostu absolutnie pozycjonować element ducha śledzić myszy. Ale to zabiera nas z powrotem do pisania kodu, który re-implementuje podstawowe części działania drag poza interfejsem API.