Wie machst du mit jquery ein Bild deinem Mauszeiger?

Question

Ich finde Drag-and-Drop schwierig (Sie wissen, halten Sie die Maustaste gedrückt, während Sie sich bewegen), und bieten eine "Auswahl und Drop", wo ein Benutzer auf ein Symbol klickt und erneut auf die Zeichenplatte klickt das entsprechende Element (ein Bild).

Wie machst du das mit jquery?

Danke.

Bearbeiten: Ich habe zwei divs, ein Symbol Platte, um Elemente aus, und eine Zeichnung Platte, wo Bilder fallen gelassen werden. Wenn die Maus die Zeichenplatte betritt, möchte ich eine 50% ige Opazität des größeren Bildes dem Mauszeiger folgen, so dass der Benutzer weiß, wo er hinfällt und ob er sich mit etwas überschneidet, das sich bereits auf dem Zeichenbrett befindet.

Answer 1

Die Antwort (James Black Hilfe verwendet wird) ist:

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

Speichern Sie das Element einfach in einer Variablen, auf die das click-Ereignis zugreifen kann.

Also, klicken Sie auf jedes Bild: $('img').bind('click', function(e) { ... }); Dann, wenn sie klicken, speichern Sie einfach das targetEvent irgendwo und binden Sie ein Klick-Ereignis an die Zeichenplatte.

Ein interessanter Weg wäre, einen Verschluss zu verwenden und das bestimmte targetEvent zu binden, so dass Sie im Falle eines Klicks auf die Zeichenplatte wissen, welcher zu bewegen ist, aber solange Sie wissen, werden Sie es einfach tun Verwenden Sie eine Animation, um das IMG an den neuen Ort zu verschieben.

Ich vergaß, Sie müssen auch sicherstellen, dass wenn ein Bild angeklickt wird, der Event-Handler, der bereits auf der Zeichenplatte ist, vor dem Binden eines neuen entfernt wird.