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

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

4 17
jquery draggable

4 ответа:

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

Вы можете сделать только с 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);
43

Я просто приготовил это так, что его очень портативный вместо "перетаскивания"во всем интерфейсе 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();
13

Все , что вам действительно нужно, - это скрипты jQuery, которые я собрал сам:, и код $('#yourElement').draggable (); 

$(document).ready(function() {
  
  $('#dragMe').draggable();
  
});
#dragMe {
  width: 100px;
  height: 100px;
  background: #bbb;
  border-top: 3px solid #eee;
  border-left: 3px solid #ddd;
  border-right: 3px solid #666;
  border-bottom: 3px solid #555;
  position: absolute;
  cursor: grab;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#dragMe:active {
  cursor: grabbing;
}
<script src="http://koda.nu/arkivet/32805212"></script>
<div id="dragMe">
  <p>Drag Me Around</p>
</div>
0