jQuery拖放时，放置滚动区域上的元素时，放置事件不会触发

Question

我正在使用jQuery UI进行拖放操作，而且一切正常，我所遇到的唯一问题是当我正在滚动，然后我试图拖动一个元素并将其放入滚动区域，元素将恢复到其原始位置。

只是为了澄清，默认情况下，当您将其拖出左侧部分时，它不会立即滚动，只有在您将其放下之后，才可以选取该元素并向左或向下滚动。

我在jsfiddle上发布了一个示例，它演示了我的问题。

$("#sidebar section span").draggable({ 
    cursor: "move", 

    helper: "clone", 

    revert: "invalid", 

    //containment: "html", 

    scroll: true 
}); 

$("#main section").droppable({ 
    tolerance: 'fit', 

    accept: "#sidebar section span", 

    drop: function(e, ui) 
    { 
     console.log("Drop"); 

     var $draggedElement = ui.draggable; 
     var $droppedArea = $(this); 

     var droppedAreaLeft = $droppedArea.offset().left; 
     var droppedAreaTop = $droppedArea.offset().top; 

     $droppedArea.parent().css("overflow", "auto"); 

     var $draggableElement = $draggedElement.clone(); 

     $draggableElement.draggable({ 
      containment: [droppedAreaLeft, droppedAreaTop], 

      scroll: true, 

      scrollSpeed: 10, 

      scrollSensitivity: 10 
     }); 

     $droppedArea.append($draggableElement); 

     $draggableElement.offset(ui.offset); 
    }, 
}); 

Answer 1

我已经解决了它通过覆盖默认函数并添加一个支持滚动的容忍的新状态。

这是代码。

var _intersect = jQuery.ui.intersect; 

jQuery.ui.intersect = function(draggable, droppable, toleranceMode) { 

    if (!droppable.offset) { 
     return false; 
    } 

    var x1 = (draggable.positionAbs || draggable.position.absolute).left, x2 = x1 + draggable.helperProportions.width, 
     y1 = (draggable.positionAbs || draggable.position.absolute).top, y2 = y1 + draggable.helperProportions.height, 
     l = droppable.offset.left, r = l + droppable.proportions.width, 
     t = droppable.offset.top, b = t + droppable.proportions.height; 

    switch (toleranceMode) { 
     case "scroll": 
      var overflowBottom = droppable.element.scrollParent().scrollTop(); 
      var overflowRight = droppable.element.scrollParent().scrollLeft();; 

      x1 = x1 - overflowRight; 
      y1 = y1 - overflowBottom; 
      x2 = x2 - overflowRight; 
      y2 = y2 - overflowBottom; 

      return (l <= x1 && x2 <= r && t <= y1 && y2 <= b); 
     default: 
      return _intersect.apply(this, arguments); 
     } 
};