Подвижный div без jQuery UI

Question

У меня есть приложение, которое позволяет пользователю открывать несколько перетаскиваемых всплывающих окон.Я не хочу использовать jQuery UI, и ниже приведен код.Однако при перетаскивании элемента div он центрируется на указателе, и это не так, как это должно быть сделано.

На самом деле, я хочу добиться того, чтобы оно могло перетаскивать окно только путем нажатия наtop 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');
    });
 });

Я не проверил это полностью, но, похоже,хорошо работать на странице быстрого теста.