【问题标题】:Cannot get jQuery UI Sortable to work properly无法让 jQuery UI Sortable 正常工作
【发布时间】:2013-10-22 02:05:08
【问题描述】:

我想要两行标签,您可以在它们之间拖放。我就是无法让它工作。

我使用以下函数来初始化我的两个列表

 $("#sortableInit, #sortableEnd").sortable({
   connectWith: "connectedSortable",
   dropOnEmpty: true
  }).disableSelection();

另外,一行 CSS 使它们成为水平而不是通常的垂直(它们都是 connectedSortable 类):

.connectedSortable > div { float: left; }

在下面的小提琴中,我将我想做的事情减少到最低限度。

http://jsfiddle.net/kuK9x/9/

你能看出我遗漏了什么明显的东西吗?

【问题讨论】:

    标签: javascript jquery css jquery-ui jquery-ui-sortable


    【解决方案1】:

    您的 javascript 面板中有一些语法错误。 (})最后不见了) 另一个语法错误是connectWith: "connectedSortable"应该是connectWith: ".connectedSortable"

    另外,你也应该将.connectedSortable设置为float,否则容器的高度将为零,这将导致jQuery中讨论的错误。见ticket#4551

    查看更新的fiddle

    $(function () {
        $("#sortableInit, #sortableEnd").sortable({
            connectWith: ".connectedSortable",
            dropOnEmpty: true
        }).disableSelection();
    });
    

    还有 CSS

    .connectedSortable {
        float:left;
    }
    .connectedSortable > div {
        float: left;
    }
    

    【讨论】:

    • 谢谢你。我在小提琴中错过了它,但在我的原始网页中没有。它仍然不允许我拖放,对吗?
    • @Chapo 它对我有用...我使用的是最新的 Chrome,也适用于 IE 10
    • 似乎 jQuery 和 jQuery UI 网站已关闭,因此我无法在 jsFiddle 上加载源代码......但它是为我的网页在本地托管的,我无法连接两个可排序的对象. “从一个到另一个”在您的小提琴中是否正常工作?如果是,我会在可以验证时验证您的答案。
    • @Chapo 我已经更新了我的答案。也请检查小提琴http://jsfiddle.net/kuK9x/10/
    • 谢谢你的作品。我还通过在.connectedSortable > div {} 指令中使用display:inline-block 而不是float:left 使其工作。见jsfiddle.net/kuK9x/11
    猜你喜欢
    • 1970-01-01
    • 2021-01-28
    • 2012-09-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-01-25
    • 2014-07-20
    相关资源
    最近更新 更多