如何在jQuery中创建一个可拖动的元素？

How do I make an element, e.g. a div, draggable using jQuery?

我如何制作一个元素，例如一个div，可以使用jQuery拖动？

3 个解决方案

#1

First load the jQuery UI:

首先加载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>

Then use jQuery UI draggable method:

然后使用jQuery UI draggable方法：

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

#2

You can do with jquery only, without jquery UI:

你可以只使用jquery，没有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

I just cooked this up so its very portable instead of "dragging" in the whole jQuery UI.

我刚刚做了这个，所以它非常便携，而不是在整个jQuery UI中“拖动”。

It doesn't select text when dragging below it so this actually works in production unlike the other code here.

它在下面拖动时不会选择文本，所以这实际上在生产中不同于此处的其他代码。

This also works with fixed positioned elements quite nicely so you can "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;
};

But this assumes absolute or fixed positioning is applied to the element already.

但是这假设绝对或固定定位已经应用于元素。

Use it like so:

像这样使用它：

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

#1