jquery overscroll +可拖动项

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“参数，但是它不能像我希望的那样工作--滚动被阻塞了，但是(我不知道为什么) "story”项目也不能被拖动到页面上。

这是一个'overscroll‘的代码

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

".scheduled“是一个”上层“div，故事放在这个div里。你有什么想法吗？

问候你，高山

Answer 1

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