Creazione della mia funzione "trascinabile"

Question

Sembra che il mio tentativo di replicare la funzione trascinabile dell'interfaccia di Jquery abbia dimostrato il principio della meccanica quantistica di una div esistente in due posti contemporaneamente.

Quando tengo il mouse sul div box e muovo il cursore del mouse, il div box inizia a lampeggiare come un matto e un "clone" del div box appare a sud-est del div box originale e lampeggia anche .

Ecco il jsfiddle:

jsfiddle

Answer 1

ho fissato il vostro jsfiddle, dargli un andare ora: http://jsfiddle.net/5Sxrq/2/

I temi sono stati:

margin-top:100px; 
margin-left:80px; 

se si desidera utilizzare i margini di allora si dovrà sottrarre dal offset

boxOff = $('#box').offset(); 
mouseOffX = e.pageX - boxOff.left; 
mouseOffY = e.pageY - boxOff.top; 

Si dovrebbe ottenere mouseOffX e mouseOffY quando mousedown evento è stato chiamato, non mai tempo y con mousemove

EDIT: questo è i problemi margine fisso: http://jsfiddle.net/5Sxrq/3/

Answer 2

La ragione ci si sfarfallio è che si sta calcolando l'offset del mouse all'interno della casella ogni volta che si sposta il mouse. Se calcoli semplicemente mouseOffX e mouseOffY una volta in onmousedown, non avrai lo sfarfallio.

Ecco una versione modificata. Ha ancora alcuni problemi, ma nessun sfarfallamento: http://jsfiddle.net/RzqQE/

ho intenzione di cercare di risolvere la cosa strana di offset nella mia versione, ma non si può dare alcuna garanzia - sto rischia di addormentarsi in qualsiasi momento.

Modifica: Ah, risolto. Ecco una versione che funziona: http://jsfiddle.net/7QzZM/

Ora per spiegare quello che ho fatto:

Non abbiamo davvero a cuore la posizione del mouse nel blocco. Quello che ci interessa è quanto spostare il blocco ogni volta che il mouse si muove. Possiamo capirlo ottenendo i delta della posizione del mouse (dx e dy nel mio codice). Per ottenere la nuova posizione del blocco, aggiungiamo i delta alla sua vecchia posizione.

L'altra differenza era che ho usato $('#box').position() anziché $('#box').offset(); questo restituisce la posizione relativa al parent della casella piuttosto che relativa al documento.