哇！修复这个问题很有趣。
第一个问题是列表永远水平滚动，我通过 CSS 中的一些简单的溢出更改来修复。我从您的 .drag_column 中删除了两个溢出属性，并将溢出：隐藏在 .drag_container 中。
.drag_container {
width: 1000px;
margin: 0 auto;
position: relative;
border: 1px solid black;
position: relative;
z-index: 1;
overflow: hidden;
}
.drag_column {
padding: 5px;
width: 490px;
height: 200px;
float: left;
position: relative;
}
不幸的是，当我这样做时，当您将可拖动对象从一个列表移动到另一个列表时，它会产生位置错误（它会向上射击，具体取决于您选择的列表项）。为了解决这个问题，我将“helper：clone”行添加到了可拖动创建函数中。
$( "#available > li" ).draggable({
revert: 'invalid',
connectToSortable: '#selected',
containment: '#drag_container',
helper: 'clone'
});
这再次造成了不良影响。克隆助手使得原始列表永远不会删除项目。为了解决这个问题，我必须手动创建一个删除旧项目的函数。我所做的就是向可拖动对象添加一个 start: 函数，该函数获取对象 id 并将其放入变量中。然后我创建了 #selected 列表的可放置对象，并在那里创建了一个 drop: 函数。该 drop 函数只是对具有匹配 id 的对象执行 slipUp(100) 操作。请注意，我在脚本启动时创建了一个变量 - 这修复了 IE 中的错误。
var dragged = null;
$(function() {
$( "#available > li" ).draggable({
revert: 'invalid',
connectToSortable: '#selected',
containment: '#drag_container',
helper: 'clone',
start: function(ui, event) {
dragged = $(this).attr('id');
}
});
$( "#selected" ).droppable({
drop: function(event, ui) {
var ident = "#" + dragged;
$(ident).slideUp(100);
}
});
我在以下位置发布了包含完整 HTML 的页面：http://pastehtml.com/view/1by9nfd.html http://pastehtml.com/view/1by9nfd.html这样你就可以随意玩耍。希望这可以帮助！
