在拖動中觸發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'); 
});