Comment faire glisser un élément dans jQuery?

Question

Comment créer un élément, par ex. un div, draggable en utilisant jQuery?

Answer 1

Première charge de l'interface utilisateur 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> 

Ensuite, utilisez jQuery UI draggable method:

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

Answer 2

Vous pouvez faire avec jquery uniquement, sans 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

Je viens Ceci est très portable au lieu de "glisser" dans toute l'interface utilisateur de jQuery.

Il ne sélectionne pas le texte lorsque vous le faites glisser en dessous pour que cela fonctionne réellement en production contrairement à l'autre code ici.

Cela fonctionne également avec des éléments fixes positionnés assez bien pour que vous puissiez « 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; 
}; 

Mais cela suppose absolu ou fixe est appliquée à l'élément déjà.

Utilisez-le comme suit:

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