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

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

1 个答案: