jquery ui 可排序droppable 和css 浮动

Question

我正在尝试创建一个简单的“游戏”：
我在右侧有一个可排序的列表，其中包含可以放入 droppable 的项目。

这是我目前所拥有的：
http://jsfiddle.net/geY2Z/1/

代码、脚本：

function func() {
    $("#list").sortable({});
    $("#container").droppable({
        accept: ".drag",
        drop: function (ev, ui) {
            $("#s").html("drop!" + count++);
            ui.helper.clone().appendTo("#container").draggable({containment:"#container"});
            ui.helper.remove();
        }
    });
}
func();

html:

<div id='list' style='width:100px;height:200px;overflow: auto; border:1px solid red; float: right;'>
    <div class='drag'><span>dragme</span></div>
    <div class='drag'><span>dragme</span></div>
</div>
<div id='container' style='float:left;border:1px solid black; width:400px;height:500px;'></div>

问题如下：
1. 我希望元素在放入容器后仍然可以拖动，但是为了限制容器的移动，所以我也使用了 draggable - 这是最好的方法吗？

2.我希望容器和列表即使调整窗口大小也不会改变它们的位置。您会注意到，如果您调整窗口大小，容器将在列表之后进行断线，并且容器内的拖动项目将移出。我不希望这种情况发生，我希望容器始终与列表在同一行，始终在左侧，宽度和高度固定。如果窗口被调整大小，我想看到容器的滚动条，里面有项目。我尝试使用overflow:auto，但没有成功。我认为这种情况下float属性不好，那我应该改用什么呢？

编辑：

另一个问题：
我注意到可以将项目“一半”放在容器内（超出容器边界），并且仍然触发 drop 事件并且该项目不会被还原。我该如何防止这种情况，将其限制在容器中或还原？
例如，尝试将项目拖动到容器外，它会被接受，但是如果再次拖动它，它将被限制在容器内，就像我希望从可排序列表中第一次拖动一样.

Answer 1

RE：#1 - 是的，这是完全可以接受的。

RE: #2 - 你想将你的两个浮动 <div> 元素包装在一个具有固定宽度的父 <div> 中；这将阻止你的包装。为了安全起见，我还会在浮动后添加一个带有明确修复的 DIV。这是您的新标记的样子：

<div style="width:510px">
    ... <!-- Your existing floating DIVs -->
    <div style="clear:both"></div>
</div>

更新的 jsFiddle，来自你的：http://jsfiddle.net/YqAP7/