Làm cách nào để tạo phần tử có thể kéo trong jQuery?

Question

Làm cách nào để tạo thành phần, ví dụ: một div, có thể kéo bằng jQuery?

Answer 1

Đầu tiên tải 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> 

Sau đó sử dụng jQuery UI draggable method:

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

Answer 2

Bạn có thể làm chỉ với jquery, mà không 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); 

Answer 3

Tôi chỉ đã nấu món này rất dễ dàng thay vì "kéo" trong toàn bộ giao diện người dùng jQuery.

Nó không chọn văn bản khi kéo bên dưới để nó thực sự hoạt động trong sản xuất không giống như mã khác ở đây.

này cũng làm việc với các yếu tố vị trí cố định khá độc đáo để bạn có thể "bến"

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

Nhưng điều này giả định tuyệt đối hoặc định vị cố định được áp dụng cho phần tử rồi.

Sử dụng nó như vậy:

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