流体网格上的JQuery UI可排序列表在拖动时向左捕捉

时间:2012-04-04 23:44:04

标签: jquery ruby-on-rails-3 jquery-ui twitter-bootstrap jquery-ui-sortable

我在使用流体网格的twitter bootstrapped应用程序中使用jquery-ui可排序列表。列表中的所有元素都使用margin:0 auto进行居中。

所有内容都可以正常工作,但是当用户拖动列表中的某个元素时,它会在拖动时直观地捕捉到左侧,这可能是因为jquery将位置设置为绝对值。

有没有办法覆盖这种行为?

更新

以下是可能相关的代码:

HTML结构

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2"></div>
        <div class="span10">
            <div id="sortable-list" data-update-url="some-url">
            <span id="position-zero"></span>
                <div class="item-container">
                    <div class="item-inner">Some text</div>
                    <div class="item-toolbar"></div>
                </div>
    </div>
        </div>
    </div>
</div>

CSS位

.row-fluid {
    width:100%;
}

.item-container {
margin:0 auto;
width:1205px;
}

.item-inner {
margin: 0 auto;
width:1163px;
}

.item-toolbar {
margin:0 auto;
display:none;
width:1203px;
}

#list-column {
margin: 0 auto 300px 0;
min-height:500px;
}

JS(Coffeescript)

jQuery ->
    $("#sortable-list").sortable
    axis: 'y'
    placeholder: "item-placeholder"
    handle: '.icon-move'
    sort: ->
        $('.item-toolbar').hide()
    update: ->
        $.post($(this).data('update-url'), $(this).sortable('serialize'))

0 个答案:

没有答案