Question

我有这个项目，我想拖动到另一个容器，但滚动后第一个项目在拖动时保持按下鼠标，第一个容器重置到顶部。

编辑。这是一个更新 jsFiddle

HTML：

<body>
<div id=left>
    <div id=item>drag me!</div>
</div>
<div id=right></div>
</body>

CSS：

#left{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:50%;
    background-color:red;
    overflow-y:scroll;
}
#right{
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    right:0;
    background-color:green;
}
#item{
    position:static;
    top:150px;
    height:50px;
    width:50px;
    background-color:black;
    color:white;
}

JAVASCRIPT：

$("#left #item").draggable({
    revert: true,
    stack:"#right",
    start: function() { $(this).parent().css('overflow-y', 'visible'); },
    stop: function() { $(this).parent().css('overflow-y', 'scroll'); }
    //helper:"clone"
});
$("#right").droppable({
    tolerance:"pointer",
    drop: function(event, ui) {
        $(".tmp").remove();
        $("<div>").appendTo(this)
            .addClass("new")
            .css("background-color","blue")
            .css("height","20px");
    },
    over: function(event, ui) {
        $("<div>").appendTo(this)
            .addClass("tmp")
            .css("border","2px dashed black")
            .css("height","20px");
    },
    out: function(event, ui) {
        $(".tmp").remove();
    }
});

我尽力恢复代码以重现该错误，因为它是一个非常大的项目，所以我希望这样有人可以帮助我。

如何在溢出时使用draggable：滚动容器？

0 个答案: