Comment faire glisser un élément dans jQuery?

Comment puis-je faire un élément, par exemple un div, déplaçable à l'aide de jQuery?

source d'informationauteur zjm1126 | 2010-03-11

  1. 11

    Premier chargement de 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>

    Ensuite utiliser jQuery UI déplaçable méthode:

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

    Vous pouvez le faire avec jquery, 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);
  3. 12

    J'ai juste cuit cela donc, il est très portable au lieu de "glisser" dans l'ensemble de jQuery UI.

    Il n'a pas de sélectionner du texte en faisant glisser en dessous si cela fonctionne réellement dans la production, à la différence de l'autre code ici.

    Cela fonctionne aussi avec fixe les éléments en position tout à fait bien de sorte que vous pouvez "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 absolue ou de correction du positionnement est appliquée à l'élément déjà.

    L'utiliser comme ceci:

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