web-dev-qa-db-ja.com

jQueryで要素をドラッグ可能にするにはどうすればよいですか？

要素を作成するにはどうすればよいですか。 div、jQueryを使用してドラッグ可能ですか？

jqueryjquery-uidraggable
23
zjm1126

最初に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>

次に、jQuery UIを使用します ドラッグ可能なメソッド ：

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

Jquery UIなしで、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);
57
user982671

私はこれをjQuery UI全体で「ドラッグ」するのではなく、非常に移植可能なように調理しました。

下にドラッグしてもテキストは選択されないため、実際には他のコードとは異なり、ここで機能します。

これは、固定された要素でも非常にうまく機能するため、「ドッキング」できます

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

ただし、これは要素に絶対位置または固定位置がすでに適用されていることを前提としています。

次のように使用します。

$('#something').draggable();
15
Jason Sebring