Controllo dell'aspetto dell'effetto trascinamento HTML5

Question

C'è un modo per controllare l'aspetto di "cosa stai trascinando" utilizzando le API di trascinamento e rilascio HTML5?

Normalmente, qualunque elemento HTML trascinabile è ciò che diventa semitrasparente e segue il cursore fino all'arresto/rilascio. Mi piacerebbe controllarlo in modo da poter iniziare il trascinamento da qualsiasi punto all'interno di un elemento, ma quando inizi effettivamente a trascinare, posso avere solo una piccola immagine che segue il cursore, esattamente dove si trova il cursore.

L'esempio pratico è: un elenco di cose da trascinare, ognuna di esse è una piccola immagine e del testo per il nome della cosa che verrà trascinata a lato di esso. Mi piacerebbe essere in grado di iniziare il mio trascinamento ovunque nell'elemento sopra l'immagine o il testo, ma solo l'immagine segue il cursore e direttamente sotto il cursore, piuttosto che sfalsare da dove hai iniziato a trascinarlo.

Posso pensare ad alcuni modi per ingannarlo (un elemento nascosto che appare dove si trova il cursore del mouse, quando si inizia a trascinare ed è ciò che effettivamente si trascina), o si usa il classico drag and drop di Javascript.

Grazie

Answer 1

penso .setDragImage(element, x, y); potrebbe essere quello che stai cercando.

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

Esempio qui: jsfiddle.net/cnAHv/

Answer 2

Date un'occhiata a this parte di jQuery UI. Ti permette di creare facilmente un fantasma dell'elemento trascinato mentre l'originale rimane nella sua posizione originale. Puoi anche specificare un 'helper' personalizzato per seguire il cursore.

Answer 3

In base a this question su StackOverflow, non è possibile modificare lo stile dell'oggetto trascinabile durante il trascinamento ma è possibile impostare un'immagine di trascinamento. Ciò farà apparire un'immagine mentre si trascina l'oggetto fantasma.

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

Spiegazione:

su dataTransfer chiamiamo una funzione setDragImage() in cui passiamo l'ID del div e dare la posizione di dove apparirà l'immagine quando inizieremo trascinandolo.

vedere di più sulla dataTransfer qui: Mozilla Developers - DataTransfer

Answer 4

Purtroppo, sembra che le specifiche è stato costruito per favorire un comportamento coerente nel nativo di personalizzazione in-browser.

Abbiamo fatto un po 'di ricerca e riassunto i nostri risultati qui:

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

Il lungo e breve, però, è che l'utilizzo di un aiuto (come jQuery UI) o posizionare il proprio è generalmente preferibile se devi fare qualcosa di sofisticato.

Tuttavia, se si desidera utilizzare il comportamento nativo e setDragImage() non è adeguato, esistono alcune alternative.

Un approccio particolarmente stravagante potrebbe comportare il dirottamento del renderer per creare uno screenshot (!) dell'elemento che desideri venga disegnato e quindi inserirlo tramite un URI di dati.

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

Un approccio più sano sarebbe quello di posizionare semplicemente assolutamente un elemento fantasma per seguire il mouse. Ma questo ci riporta alla scrittura del codice che reimplementa le parti principali del comportamento di trascinamento al di fuori dell'API.