Question

我正在尝试制作一对JQuery UI可排序的div，您可以将项目从一个垂直扩展的div移动到另一个水平扩展的div（想想类似于时间轴）。这个想法是你可以将一个项目从持有者div拖到时间轴div上，当你添加项目时，div会扩展以保存它们。

我已经尝试了一些不同的CSS东西，从使用浮动和内联块到默认使容器非常宽（有点工作，但我默认没有那里的所有额外空间，并且它仍然可能用完空间），但我似乎无法使其水平扩展，只能垂直扩展。这是我目前的代码：

JS：

jQuery( ".dragto ul.connect-sortable, .dragfrom ul.connect-sortable" ).sortable({
    items: "li:not(.empty)",
    connectWith: ".connect-sortable",
    placeholder: "ui-state-highlight",

    start: function(event, ui) { ui.placeholder.html('&nbsp;') },

    receive : function(event, ui ){

    },

    update : function(event, ui ){

    }
  }).disableSelection();

示例HTML：

<div class="dragto">
    <ul class="connect-sortable">
    </ul>
</div>
<div class="dragfrom">
    <ul class="connect-sortable">
        <li>Test</li>
        <li>Test2</li>
        <li>Test3</li>
    </ul>
</div>

CSS：

ul.connect-sortable {
  margin: 0;
  padding: 0;
  list-style: inline;
  width: 100%;
  min-width: 100%;
  min-height: 200px;
  padding: 10px;
  margin: 10px;
  border: 2px solid #bfb9b3;
  background-color: #FAFAFA;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.dragto {
  width: 100%;
  overflow-x: scroll;
}

.dragto ul.connect-sortable {
  height: 230px;
  /* width: 10000px; */
}


ul.connect-sortable li {
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: top;
  margin: 5px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 8px;
  text-align: center;
  background-color: #FEFEFE;
  border: 2px solid #bfb9b3;
  float: left;
}

ul.connect-sortable li:hover {
  border: 2px solid #5cc7ee;
  background: #e5f6fb;
  cursor:pointer;
}

.ui-state-highlight {
  border: 2px dashed #D8D8D8 !important;
  background: #F0F0F0 !important;
  height: 200px;
  width: 200px;
}

.ui-sortable-helper {
  -webkit-box-shadow: 0px 3px 5px #888888;
  -moz-box-shadow: 0px 3px 5px #888888;
  box-shadow: 0px 3px 5px #888888;
}
.ui-sortable-placeholder {
  display: inline-block;
  height: 1px;
}

有什么想法吗？

Fiddle

JQuery UI可排序水平可扩展容器

0 个答案: