Arrastrar y soltar sin JQuery UI

Question

He buscado mucho para encontrar un tutorial para arrastrar & soltar con jQuery solo (sin UI), pero debido a la popularidad de JQuery UI, todas las funciones de arrastrar y soltar se basan en JQuery UI.

¿Alguien me puede dar una pista sobre cómo hacer una Arrastre básico & Drop by JQuery standalone?

Answer 1

creo que un buen punto de partida podría ser para mapear el proceso, y luego decidir qué herramientas de jQuery necesitarás usar para cada acción del usuario.

por lo que el proceso de usuario podría ser:

• Haga clic en el div contenido en un área de "arrastrable"
• arrastrar el contenido, que mantendrá el contenido dentro de ese div
• liberación del ratón, que colocará el contenido en un contenedor "droppable", que ajustará el tamaño del contenido anterior para que se ajuste al tamaño que se puede soltar

que necesita los siguientes tipos de detectores de eventos:

• mouseup
• mousedown
• animado

Por lo menos. Otra opción sería verificar la fuente jQuery UI y ver cómo lo hacen. Lo cual le dirá exactamente qué hacer, pero puede agregarlo o recortarlo cuando sea necesario.

Answer 2

Hay varios plugins que se pueden utilizar echar un vistazo a la siguiente

http://wayfarerweb.com/jquery/plugins/animadrag/

http://threedubmedia.com/code/event/drag/demo/

todavía jQuery, pero sin interfaz de usuario

Answer 3

Encontré el mismo problema, y ​​33.4 kilobytes para el jqueryUI ministrado con solo arrastrar y soltar es demasiado grande para la funcionalidad limitada que necesitaba. El siguiente enfoque no es código funcional: es solo una estructura simple para visualizar lo que debe suceder.

$('.draggable').on{ 
    mousemove : function(){ 
    var mouseposition = { // this also needs to account for onclick offset of pointer vis-a-vis element 
     x : pageX, 
     y : pageY 
    }; 
    $(this).css({ 
     top : mouseposition.y, 
     left : mouseposition.y 
    }); 
    if(// this statement is kinda bogus, idea is to perform a collision detection via coordinate comparison 
    $('.draggable').offset().top < $(.droppable').offset().top 
    && 
    $('.draggable').offset().left < $(.droppable').offset().left 
) { 
     alert('the item has been dropped'); 
    } 
    } 
}); 

Answer 4

http://thezillion.wordpress.com/2012/09/27/javascript-draggable-2-no-jquery

ver esto. Es core JS y fácil de implementar.

Answer 5

Entiendo que esta es una publicación anterior, pero también me interesaba hacerlo sin la interfaz de usuario de Jquery. Revisé los enlaces de arriba, but i found this to be the best. Solo es 8 kb minificada (UI clasificable ~ 30, lo he leído), y es independiente de cualquier gigantesca biblioteca de JQuery (aunque esos PUEDEN hacernos la vida más fácil a veces).

Answer 6

me encontré con esta muy útil: http://draggabilly.desandro.com/