jquery过度滚动+可拖动项目

Question

我有一部分html代码：

<div class="stories">
    <div class="story">                         
        <div class="..">
            <img alt="" class="..">
        </div>
        <div class="dragger"></div> 
    <div>

    <div class="story">
        ...
        <div class="dragger"></div> 
    </div>
</div>

“dragger”是一个元素，允许您使用此 jquery 代码在页面上拖动“故事”块：

$('.dragger').mousedown(function(e){
    $(this).parent().draggable({
        disabled: false, opacity: 0.5, zIndex: 2700, revert: true,
        stop: function() { $(this).draggable({ disabled: true }) }
})

在我将这个“故事”元素放入过度滚动区域之前，它的效果非常好。当我在“拖动器”的小区域之外的任何地方管理“单击并拖动”时，我想进行滚动。所以例如。当我鼠标按下我想滚动的故事时。我尝试使用带有“.dragger”的“cancelOn”参数，但它不能按我的意愿工作 - 滚动被阻止但（我不知道为什么）“故事”项目也无法被拖动在页面上方。

这里是'overscroll'的代码

$(".scheduled").overscroll({
    direction: 'horizontal',
    wheelDirection: 'horizontal',
    wheelDelta: 80,
    cancelOn: ".dragger"
});

".scheduled" 是一个“上层” div，其中放置了故事。你有什么想法吗？

问候， 葛山

Answer 1

当您使用 cancelOn 时，该事件可能不会冒泡，这可能会破坏可拖动性。尝试在单击要拖动的元素时暂时禁用过度滚动（使用removeOverscroll）。拖动完成后，您可以重新启用插件。