从选择框中拖动所有选定元素的副本 - 可能吗？

Question

我有一个选项列表 Web 界面：一对选择元素，它们之间有一对按钮（一个向左箭头和一个向右箭头）。用户可以通过例如选择左列中的选项之一并单击右向箭头来在两列之间移动项目。

现在我有一个增强请求：有人希望能够在两列之间拖放项目，而不是单击按钮。我最初的两个选择框设置的问题是，一旦我单击突出显示的选项之一来启动拖动，所有其他选定的选项都会被取消选择。使用 jQuery，我已将 mousedown 事件处理程序附加到选择框和每个仅在事件对象上调用 PreventDefault() 的选项，但这还不够。在 Firefox 3 上，单击的选项立即失去焦点，但所有其他选项仍然被取消删除，而在 IE6（遗憾的是我仍然必须支持）上，这没有任何区别。

所以我想我也许可以使用列表元素或 div 或其他东西创建一个合理的选择框传真。我可以创建一些在 Firefox 上运行的看起来合理的东西，但在 IE6 上，如果我按住 Shift 键并单击伪选择对象的一个​​元素（为了选择一系列选项），IE 将选择我所在位置之间的所有文本。单击和我最后单击的位置。同样，我已将 PreventDefault-ing mousedown、mouseup 和 click 处理程序附加到所有涉及的元素，但这没有帮助。

我什至尝试在原始选择框和伪选择对象上覆盖透明 div，想拦截鼠标点击并手动管理选择，但我无法使其在 IE 上工作。如果我使用选择框，我无法阻止单击更改选择，如果我使用看起来像选择元素的文本，我无法阻止它在按住 Shift 键的同时单击时选择一系列文本。

是否有一些通用的解决方案，或者我只是运气不好？

Answer 1

查看具有两个连接的可排序列表的 Jquery UI 可排序： http://jqueryui.com/demos /sortable/#connect-lists

只是：

    $('.selector').sortable({ connectWith: '.otherlist' });

Answer 2

我最终选择了“不可选择”属性。