¿Cómo puedo hacer que un elemento se pueda arrastrar en jQuery?

Question

¿Cómo hago un elemento, p. un div, arrastrable usando jQuery?

Answer 1

Primera carga de la interfaz de usuario jQuery:

<link type="text/css" href="css/themename/jquery-ui-1.7.1.custom.css" rel="Stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script> 

A continuación, utilice jQuery UI draggable method:

<script type="text/javascript"> 
$(function() { 
    $("#b").draggable(); 
}); 
</script> 

Answer 2

Usted puede hacer sólo con jQuery, sin interfaz de usuario jQuery:

function handle_mousedown(e){ 
    window.my_dragging = {}; 
    my_dragging.pageX0 = e.pageX; 
    my_dragging.pageY0 = e.pageY; 
    my_dragging.elem = this; 
    my_dragging.offset0 = $(this).offset(); 
    function handle_dragging(e){ 
     var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0); 
     var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0); 
     $(my_dragging.elem) 
     .offset({top: top, left: left}); 
    } 
    function handle_mouseup(e){ 
     $('body') 
     .off('mousemove', handle_dragging) 
     .off('mouseup', handle_mouseup); 
    } 
    $('body') 
    .on('mouseup', handle_mouseup) 
    .on('mousemove', handle_dragging); 
} 
$('#b').mousedown(handle_mousedown); 

Answer 3

acabo cociné esto así que es muy portátil en lugar de "arrastrar" en toda la interfaz de usuario de jQuery.

No selecciona el texto cuando se arrastra debajo de él, así que esto realmente funciona en producción a diferencia del otro código aquí.

Esto también funciona con elementos posicionados fijos bastante bien para que pueda "dock"

$.fn.draggable = function(){ 
    var $this = this, 
    ns = 'draggable_'+(Math.random()+'').replace('.',''), 
    mm = 'mousemove.'+ns, 
    mu = 'mouseup.'+ns, 
    $w = $(window), 
    isFixed = ($this.css('position') === 'fixed'), 
    adjX = 0, adjY = 0; 

    $this.mousedown(function(ev){ 
     var pos = $this.offset(); 
     if (isFixed) { 
      adjX = $w.scrollLeft(); adjY = $w.scrollTop(); 
     } 
     var ox = (ev.pageX - pos.left), oy = (ev.pageY - pos.top); 
     $this.data(ns,{ x : ox, y: oy }); 
     $w.on(mm, function(ev){ 
      ev.preventDefault(); 
      ev.stopPropagation(); 
      if (isFixed) { 
       adjX = $w.scrollLeft(); adjY = $w.scrollTop(); 
      } 
      var offset = $this.data(ns); 
      $this.css({left: ev.pageX - adjX - offset.x, top: ev.pageY - adjY - offset.y}); 
     }); 
     $w.on(mu, function(){ 
      $w.off(mm + ' ' + mu).removeData(ns); 
     }); 
    }); 

    return this; 
}; 

Pero esto supone absoluto o posicionamiento fijo se aplica al elemento ya.

Se usa así:

$('#something').draggable();