javascript - dropzone 中的 Jqueryui 可拖动不会滚动，恢复回来，存在滚动条

Question

在我的主页上，我有 2 个 div，都处于固定位置。第一个 div 是“dropzone”，第二个 div 包含多个可拖动的 div。

在我的 fiddle 中，我故意省略了代码以使其保持简洁和简短，但删除的代码不会影响我的问题

我可以毫无问题地拖动所有可拖动对象，并确认放置在拖放区域上时的预期行为。这可以在 fiddle 中看到。我还可以将其拖放到 dropzone div 可见区域内的任何位置。

我希望能够再次拾取它并将其移动到拖放区中的任何位置到最右侧或较低的位置，以便您需要滚动。发生的情况是滚动条确实接合，但一旦拖动，它就会弹回来。不过，我可以将其拖动到可见区域的任何位置。

我的其他代码(省略)需要启用恢复和辅助克隆，这就是这里使用它的原因。其他代码工作 100% 如果我尝试为其他问题提供的一些解决方案，事情会变得更糟或停止一起工作，无论是在这个示例中，还是在我的其他使用帮助器克隆/恢复的代码中

我怎样才能做到这一点？？？ fiddle : http://jsfiddle.net/zVZ6X/22/CSS

body{margin:0; padding:0; background-color:grey;}
.sandbox { position:relative; 
           overflow:scroll; 
           width:600px; 
           height:250px;
           background-color:#F7DF7C; 
           border:none; padding:0; }
.tilecontainer{ position:fixed; 
            bottom:10px; 
            height:150px; 
            width:400px; 
            background-color:#C7DE7C; }
.thumbsize{ height:100px; 
            width:100px; 
            float:left; 
            border:0;
            overflow:hidden;}
.absolute{ position:absolute; }

html

<div id='sandbox' class='sandbox'></div>
<div id='tilecontainer' class='tilecontainer'>
<div id='thumb1' class='thumbsize' style='background-color:red;'></div>   
<div id='thumb2' class='thumbsize' style='background-color:blue;'></div>   
<div id='thumb3' class='thumbsize' style='background-color:orange;'></div>   
</div>

js

$(function() {
$( ".thumbsize" ).draggable({
        helper:"clone", 
        revert: "invalid",
        grid: [ 100, 100 ],
        zIndex: 100,
        opacity: 0.55,
        stack: ".thumbsize",
        containment: "sandbox",
        scroll: true
 });

$("#sandbox").droppable({
    drop: function(event, ui) {
        $(ui.draggable).appendTo(this).addClass('absolute').css({
            top: ui.offset.top,
            left: ui.offset.left,
        });
    }
});

});

我的其他代码(省略)需要启用恢复和辅助克隆，这就是这里使用它的原因。其他代码 100% 工作

Answer 1

添加

$(ui.draggable).draggable({ revert: false });$(ui.draggable).draggable({ helper: "original"});

成功了!

我认为将克隆助手与恢复结合起来是罪魁祸首。如果单独删除这些属性中的任何一个，问题仍然存在。两者都需要删除才能工作，但如果我删除它们，我就会失去其他代码所需的恢复功能。

答案是在删除时删除有问题的属性，或者删除还原和克隆帮助程序。