¿Cómo se hace una imagen para seguir el puntero del mouse con jquery?

Question

Me resulta difícil arrastrar y soltar (ya sabes, manteniendo presionado el botón del mouse mientras me muevo), y quiero ofrecer un 'seleccionar y soltar' donde un usuario hace clic en un icono y vuelve a hacer clic en el dibujo para dejar caer el elemento correspondiente (una imagen).

¿Cómo se hace eso con jquery?

Gracias.

Editar: Tengo dos divs, una placa de iconos para seleccionar elementos y una placa de dibujo donde se sueltan las imágenes. Cuando el mouse entre en la placa de dibujo, quiero una opacidad del 50% de la imagen más grande, siga el puntero del mouse para que el usuario lo sepa haciendo clic donde va a caer y si se superpone con algo que ya está en el tablero de dibujo.

Answer 1

La respuesta (con la ayuda de James Negro) es:

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

demostración Jsbin here.

Answer 2

Simplemente almacene el elemento en alguna variable que sea accesible para el evento de clic.

Por lo tanto, haga clic en cada imagen: $('img').bind('click', function(e) { ... }); Luego, cuando hagan clic, simplemente almacene el evento target en algún lugar y vincule un evento de clic al plano de dibujo.

Una forma interesante sería usar un cierre y unir ese evento objetivo particular para que, en caso de un clic en el plano de dibujo, sabrá cuál mover, pero mientras sepa, entonces solo usa una animación para mover el img a la nueva ubicación.

Lo olvidé, también deberá asegurarse de que cuando se hace clic en una imagen, se elimina el controlador de eventos que ya está en la placa de dibujo antes de enlazar uno nuevo.