Gli eventi mousedown, mouseup, mousemove e mouseleave possono essere utilizzati per emulare il drag 'n drop con jQuery.
Vediamo come.
La procedura è semplice:
mousedown– Registriamo il dragging come attivo e le coordinate del mouse con la posizione dell'elemento.mouseup– Registriamo il dragging come completato.mousemove– Se il dragging è attivo, sommiamo le coordinate originali e la posizione originale dell'elemento e sottraiamo al risultato la posizione attuale del mouse. Il valore ottenuto ci darà la nuova posizione dell'elemento.mouseleave– Registriamo il dragging come completato.
Il codice è il seguente:
$(function() {
var $bar = $( "#bar" );
var $box = $( "#box" );
$bar.on({
mousedown: function( e ) {
$( this ).data( "drag", true );
$( this ).data( "x", e.clientX ).
data( "left", $box.position().left
);
return false;
},
mouseup: function() {
$( this ).data( "drag", false );
},
mouseleave: function() {
$( this ).data( "drag", false );
},
mousemove: function( e ) {
if( $( this ).data( "drag" ) ) {
$box.css( "left", ( ( $( this ).data( "left" ) + $( this ).data( "x" ) ) - e.clientX ) + "px" );
}
}
});
});