Parece que mi intento de intentar replicar la función de arrastrar de Jquery UI ha probado el principio de Quantum Mechanics de un div existente en dos lugares a la vez.Creando mi propia función "arrastrable"
Cuando mantengo mi mouse hacia abajo en el cuadro div y muevo el cursor del mouse, el cuadro div comienza a parpadear como loco y aparece un "clon" del cuadro div al sureste del cuadro original div y también parpadea .
Aquí está la jsFiddle:
he fijado su jsFiddle, darle una oportunidad ahora: http://jsfiddle.net/5Sxrq/2/
Los temas fueron:
margin-top:100px;
margin-left:80px;
si desea utilizar los márgenes entonces usted tendrá que restar de compensaciones
boxOff = $('#box').offset();
mouseOffX = e.pageX - boxOff.left;
mouseOffY = e.pageY - boxOff.top;
debe obtener mouseOffX y mouseOffY cuando mousedown evento fue llamado, no siempre Y el tiempo con mousemove
EDIT: éste está con problemas de margen fijo: http://jsfiddle.net/5Sxrq/3/
Encontré que simplemente usando '$ ('# box'). Position()' se ocupaba de los problemas de margen para mí. –
Sí, pero siempre que su 'caja' no sea un elemento secundario, de lo contrario le dará una' compensación' wrt a ese elemento primario, no a la ventana .... – sally
Ah, creo que tiene un punto. Yo * creo * Lo evité en mi versión, pero no consideré cómo se traduciría en la tuya. Solo otro recordatorio de por qué no debería responder a las preguntas sobre SO alrededor de las 4 de la mañana. –
La razón te parpadeo es que se está calculando el desplazamiento del ratón dentro de la caja cada vez que se mueve el ratón. Si simplemente calcula mouseOffX y mouseOffY una vez en onmousedown, no lo tendrá parpadeando.
Aquí hay una versión modificada. Todavía tiene algunos problemas, pero no parpadea:
http://jsfiddle.net/RzqQE/
Voy a tratar de solucionar el inconveniente extraño en mi versión, pero no puedo darte ninguna garantía. Es probable que me quede dormido. en cualquier momento.
Editar: Ah, lo arregló. Aquí hay una versión que funciona: http://jsfiddle.net/7QzZM/
Ahora, para explicar lo que hice:
Realmente no importa la posición del ratón en el bloque. Lo que nos importa es cuánto mover el bloque cada vez que se mueve el mouse. Podemos resolver esto obteniendo los deltas de la posición del mouse (dx y dy en mi código). Para obtener la nueva posición del bloque, simplemente agregamos los deltas a su posición anterior.
La otra diferencia es que utilicé $('#box').position() en lugar de $('#box').offset(); esto devuelve la posición relativa al padre de la caja en lugar de relativa al documento.
Parece que no soy el único a las 4 AM. Tanto su respuesta como la de Sally son bastante buenas, pero la solución de Sally implica menos cambios en mi código. Supongo que decidiré cuál es la respuesta más adelante. – user701510
Lo más probable es que el código de Sally sea menos ad hoc y, por lo tanto, probablemente requiera menos edición para estar presentable. –
he fijado su jsFiddle, darle una oportunidad ahora: http://jsfiddle.net/5Sxrq/2/ – sally
@sally: ¿Estás seguro de que realmente lo arreglaste? Todavía estoy obteniendo el mismo parpadeo con tu versión. EDITAR: No importa, estaba mirando el enlace equivocado. –