Как сделать элемент перетаскиваемым в jQuery? - PullRequest
Новая
       10

Как сделать элемент перетаскиваемым в jQuery?

19 голосов
/ 11 марта 2010

Как мне сделать элемент, например, div, перетаскиваемый с помощью jQuery?

Ответы [ 3 ]

50 голосов
/ 08 мая 2013

Вы можете делать только с jquery, без пользовательского интерфейса 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);
14 голосов
/ 20 декабря 2013

Я только что приготовил это, чтобы оно было очень портативным, а не "перетаскивающим" весь пользовательский интерфейс jQuery.

Он не выделяет текст при перетаскивании под ним, поэтому в действительности он работает в отличие от другого кода здесь.

Это также прекрасно работает с фиксированными элементами, так что вы можете "закрепить" 

$.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();
14 голосов
/ 11 марта 2010

Сначала загрузите пользовательский интерфейс 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>

Затем используйте jQuery UI перетаскиваемый метод : 

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