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 代码在页面上拖动“故事” block :

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

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

这是“overscroll”的代码

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

“.scheduled”是放置故事的“上”div。你有什么想法吗？

问候，葛山

Answer 1

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