在拖动中触发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'); 
});