沒有jQuery UI的可移動div

Question

我有一個應用程序可以讓用戶打開幾個可拖動的彈出窗口。我不想使用jQuery UI，下面是目前的代碼。但是，當拖動一個div時，它會集中到指針上，而這不是它應該如何完成的。

其實，我想要完成的是，它應該只能通過點擊頂部div（如下圖所示）拖動窗口。

function endMove() { 
    $(this).removeClass('movable'); 
} 
function startMove() { 
    $('.movable').mousemove(function(event) { 
     var thisX = event.pageX - $(this).width()/2, 
      thisY = event.pageY - $(this).height()/2; 

     $('.movable').offset({ 
      left: thisX, 
      top: thisY 
     }); 
    }); 
} 
$(document).ready(function() { 
    $("#containerDiv").click(function() { 
     $(this).addClass('movable'); 
     startMove(); 
    }).mouseup(function() { 
     $(this).removeClass('movable'); 
     endMove(); 
    }); 
}); 

Answer 1

如果您的div鋪設了所以用頭和嵌套那麼我認爲你可以做如下修改綁定的點擊操作的頭，但移動應用到內容區域的容器容器。此外，您還需要捕獲點擊的初始位置，以避免造成div來跳計算從那裏開始你的運動增量：

var x = 0, y = 0; 
$(document).ready(function() { 
    $('.movable').live('mousemove', function(event) { 
    var deltaX = event.pageX - x, 
     deltaY = event.pageY - y; 

    x = event.pageX; 
    y = event.pageY; 

    var movable = $('.movable'); 
    movable.offset({ 
     left: movable.offset().left + deltaX, 
     top: movable.offset().top + deltaY 
    }); 
    }); 

    $("#headerDiv") 
    .mousedown(function(event) { 
     x = event.pageX; 
     y = event.pageY; 
     $(this).parent().addClass('movable'); 
    }) 
    .mouseup(function() { 
     $(this).parent().removeClass('movable'); 
    }); 
}); 

我還沒有徹底測試這一點，但它似乎工作在一個快速測試頁面中很好。