0

Example:

http://jsfiddle.net/sP3UZ/2675/

As soon I start dragging an element, the next ones shift a little bit to the left.

Floating the elements is a common solution to have an horizontal sortable, but I'm wondering if there is a way to stop items from shifting as you start dragging?

Css:

#draggable1 { background:#ff0000; width: 150px; height: 35px; padding: 0.5em; }
#draggable2 { background:#00ff00; width: 150px; height: 35px; padding: 0.5em; }
#draggable3 { background:#0000ff; width: 150px; height: 35px; padding: 0.5em; }

#sortable { width: 700px; height: 35px;  }

#sortable > div { float: left; }
4

2 回答 2

5

这是因为您为每个可拖动的 div 使用了填充（填充：0.5em；）。您需要删除它并为其创建一个新容器。

过程：

  • 在您的可拖动 div 中添加 p 标签。
  • 删除可拖动 div 的填充并将其添加到新标签（此处为 p）

你很高兴=）

Here is an example:例子

于 2013-09-20T14:23:33.743 回答
1

您需要声明一个占位符并在您的 css 中将其类定义为与您的元素完全相同的大小。代码如下，这是一个适合您的 jsfiddle：http: //jsfiddle.net/sP3UZ/2706/

同样，为了更好地衡量，这里是占位符文档的链接：http: //api.jqueryui.com/sortable/#option-placeholder

HTML

<div class="demo">
    <div id="sortable" class="ui-state-default">
        <div id = "draggable1" class="ui-state-default">Home</div>
        <div id = "draggable2" class="ui-state-default">Contact Us</div>
        <div id = "draggable3" class="ui-state-default">FAQs</div>
    </div>
</div>

CSS

#draggable1 { 
    background:#ff0000; 
    width: 150px; 
    height: 35px; 
    padding: 0.5em; 
}
#draggable2 { 
    background:#00ff00; 
    width: 150px; 
    height: 35px; 
    padding: 0.5em; 
}
#draggable3 { 
    background:#0000ff; 
    width: 150px; 
    height: 35px; 
    padding: 0.5em; 
}
#sortable { 
    width: 700px; 
    height: 35px;  
}
#sortable > div { 
    float: left; 
}
.sortable-placeholder {
    width: 150px; height: 35px; padding: 0.5em;
}

JS

$("#sortable").sortable({
    revert: true,
    placeholder: "sortable-placeholder"
});

祝你好运！

最好的，

乔什

于 2013-10-03T04:13:53.047 回答