Jak zrobić zdjęcie za pomocą wskaźnika myszy z jquery?

Question

Uważam, że funkcja "przeciągnij i upuść" jest trudna (no wiesz, trzymanie wciśniętego przycisku myszy podczas ruchu) i chcesz zaproponować opcję "wybierz i upuść", w której użytkownik klika ikonę i klika ponownie na tablicy rysunkowej, aby upuścić odpowiedni element (obrazek).

Jak to zrobić z jquery?

Dzięki.

Edytuj: Mam dwa elementy div, płytkę z ikonami do wyboru elementów i tablicę rysunkową, na której zdjęcia są upuszczane. Kiedy mysz wchodzi do płyty rysunkowej, chcę, aby 50% krycia większego obrazu podążało za wskaźnikiem myszy, tak aby użytkownik wiedział, klikując, gdzie ma zostać upuszczone i czy pokrywa się z czymkolwiek już na desce kreślarskiej.

Answer 1

Odpowiedź (korzystania z pomocy Jamesa Blacka) wynosi:

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

Wystarczy zapisać element w zmiennej, która jest dostępna dla zdarzenia kliknięcia.

Załóżmy, że na każdym obrazku znajduje się: $('img').bind('click', function(e) { ... }); Następnie, po kliknięciu, po prostu zapisz obiekt targetEvent i przypisz zdarzenie click do tablicy rysunkowej.

Ciekawym sposobem byłoby użycie zamknięcia i związanie tego konkretnego obiektu TargetEvent, tak aby w przypadku kliknięcia na tabliczkę znamionową użytkownik wiedział, do którego elementu należy się przenieść, ale tak długo, jak wiadomo, wystarczy użyj animacji, aby przenieść obraz do nowej lokalizacji.

Zapomniałem, musisz również upewnić się, że po kliknięciu obrazu, obsługa zdarzenia, która jest już na płycie rysunkowej, jest usuwana przed związaniem nowego.