Jak uczynić element przeciągalny w jQuery?

Question

Jak utworzyć element, np. div, przeciągalny przy użyciu jQuery?

Answer 1

najpierw załadować jQuery UI:

<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> 

Następnie za pomocą jQuery UI draggable method:

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

Answer 2

Można to zrobić tylko z jQuery, bez jQuery UI:

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

Właśnie ugotował to tak, że jest bardzo przenośny zamiast "przeciągania" w całym interfejsie jQuery.

Nie zaznacza tekstu podczas przeciągania pod nim, więc to faktycznie działa w produkcji, w przeciwieństwie do innego kodu tutaj.

ta działa również z trwałych elementów pozycjonowanych całkiem ładnie więc można „zadokować”

$.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; 
}; 

Ale to zakłada bezwzględny lub pozycjonowanie stałe jest stosowane do elementu już.

Używaj go tak:

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