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');
    });
 });

我没有对此进行彻底测试，但它似乎在快速测试页面中运行良好。

没有jQuery UI的可移动div

1 个答案: