在拖动中触发 mouseup 有什么问题？

Question

我试图在到达容器边缘时禁用 jquery 拖动（对 x 轴的约束）。 Here's代码：

var draggable = $("#drag-draggable");
var draggableWidth = draggable.width();
var draggableParentWidth = $('#drag-wrapper').width();
draggable.draggable({
  axis: "x",
  containment: "parent",
  drag: function (e, ui) {
    if ((draggableRight = ui.position.left + draggableWidth) == draggableParentWidth) {
      draggable.trigger('mouseup');
      console.log("finished");
    }
  }
});

事实是：当我到达边缘（左）时，触发了 mouseup，但它抛出了一个错误：Uncaught TypeError: Cannot read property '0' of null(…)

停止拖动，结果不完整（我可以看到红色框左侧的一些像素）。

为什么我错了？

Answer 1

使用这个fiddle:

JS:

var draggable = $("#drag-draggable");
var draggableWidth = draggable.width();
var draggableParentWidth = $('#drag-wrapper').width();
draggable.draggable({
  axis: "x",
  containment: "parent",
  drag: function (e, ui) {
  var draggableRight = draggable.position().left + draggableWidth;
    if (draggableRight >= draggableParentWidth) {
    e.preventDefault();
      draggable.trigger('mouseup');
      console.log("finished");
      //e.stopPropagation();
    }
  }
});

draggable.on('mouseup',function(){
console.log('hit');
});