0

このアイテムを別のコンテナにドラッグしたいのですが、スクロールした後、ドラッグ中に最初のアイテムがマウスの下に留まり、最初のコンテナが一番上にリセットされます。

編集。これは更新された 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;
}

ジャバスクリプト:

$("#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();
    }
});

非常に大規模なプロジェクトであるため、コードを再開してバグを再現するために最善を尽くしました。この方法で誰かが私を助けてくれることを願っています.

4

0 に答える 0