可拖动的实现在Firefox中不起作用

时间:2014-06-17 04:52:13

标签: javascript jquery

我正在玩可拖动div的实现。代码非常简单。它似乎与Chrome一起使用,但在Firefox下,事情变得很糟糕,同样是jsfiddle。

jsfiddle链接:http://jsfiddle.net/LXUuh/

 var activeDiv, movingMode, originalTop, originalLeft, originalPageX, originalPageY;

  $(".draggable").mousedown(function(event) {
    event.preventDefault();
    activeDiv = $(this);
    movingMode = true;
    originalTop = $(this).offset().top;
    originalLeft = $(this).offset().left;
    originalPageX = event.pageX;
    originalPageY = event.pageY;
  });

  $("body").mousemove(function(event) {
    if (activeDiv) {
      var top  = originalTop + event.pageY - originalPageY,
          left = originalLeft + event.pageX - originalPageX;
      // activeDiv.css({
      //   position: "absolute",
      //   top: top,
      //   left: left
      // });
      activeDiv.offset({
        left: left,
        top: top
      });
      originalTop = top;
      originalLeft = left;
      originalPageX = event.pageX;
      originalPageY = event.pageY;
    }
  });

  var unbindDraggble = function(event) {
    if (activeDiv) {
      activeDiv = null;
    }
  };

  $("body").mouseup(unbindDraggble);
  $(".draggable").focusout(unbindDraggble);

1 个答案:

答案 0 :(得分:0)

在css中向身体添加高度(100%):

body{
   height:100%;    
}

更新了你的小提琴

JSFIDDLE