Come si fa a creare un'immagine seguendo il puntatore del mouse con jquery?

Question

Trovo difficile il trascinamento della selezione (sai, tenendo premuto il pulsante del mouse mentre si muove), e voglio offrire un 'selezionare e rilasciare' dove un utente fa clic su un'icona e fa nuovamente clic sulla piastra da disegno per rilasciare l'elemento corrispondente (un'immagine).

Come si fa con jquery?

Grazie.

Modifica: Ho due div, una piastra di icone per selezionare gli elementi da e una piastra di disegno in cui le immagini vengono rilasciate. Quando il mouse entra nella piastra da disegno, voglio un'opacità del 50% dell'immagine più grande, segui il puntatore del mouse in modo che l'utente sappia facendo clic sul punto in cui verrà rilasciato e se si sovrappone a qualcosa già presente sul tavolo da disegno.

Answer 1

La risposta (utilizzando l'aiuto di James Black) è:

HTML

<div id="sketch"></div> 
    <img src="cat.jpg" class="follow" style="position: absolute;"/> 

JQuery

$("#sketch").mousemove(function(e){ 
     $('.follow').css({'top': e.clientY - 20, 'left': e.clientX - 20}); 
}); 

Jsbin demo here.

Answer 2

Basta memorizzare l'elemento in una variabile accessibile per l'evento click.

Quindi, avere un onclick su ogni immagine: $('img').bind('click', function(e) { ... }); Quindi, quando fanno clic, è sufficiente memorizzare il targetEvent da qualche parte e associare un evento click alla piastra di disegno.

Un modo interessante sarebbe utilizzare una chiusura e legare quel particolare targetEvent in modo che, in caso di un clic sulla piastra di disegno, saprai quale spostare, ma finché lo sai, allora avrai solo usa un'animazione per spostare l'immagine nella nuova posizione.

Ho dimenticato, sarà anche necessario assicurarsi che quando si fa clic su un'immagine che il gestore eventi che è già sulla piastra da disegno sia rimosso prima di vincolarne uno nuovo.