jquery - 如何在 JQuery connectedSortable 容器之间定位图像

Question

我有一个包含两个无序列表的 HTML 页面，类型为 connectedSortable。我想在容器之间放置一个箭头图像，以指示应将元素从一个拖到另一个。

我的箭头容器的 css 如下所示:

.centered_invisible
{
  position: relative;
  float: center;
  margin:0 auto;
}

我的 HTML 看起来像这样:

<ul name="dragSrc" id="sortable1" class="connectedSortable" >
  <li value="foo" class="ui-state-default">Item</li>
</ul>
<div class="centered_invisible"><img src="images/RightGreenArrow.png" height="50" width="100"></div>
<ul name="dragDst" id="sortable2" class="connectedSortable" >
</ul>

箭头显示正确，但它始终出现在右侧容器的顶部。我希望它出现在容器之间(理想情况下居中)。有没有办法用 css 或 HTML 做到这一点？我试过填充和 JQuery 的“after”函数，但到目前为止我无法让箭头在容器之间移动。

Answer 1

一种方法 - 为列表设置静态高度(+ overflow-y 滚动)，然后将箭头的 margin-top 设置为 列表高度的一半 - 图像高度的一半。

例如:

HTML

<ul name="dragSrc" id="sortable1" class="connectedSortable">
  <li value="foo" class="ui-state-default">Item</li>
</ul>
<div class="centered_invisible"><img src="images/RightGreenArrow.png" height="50" width="100"></div>
<ul name="dragDst" id="sortable2" class="connectedSortable">
  <li value="foo" class="ui-state-default">Item</li>
</ul>

CSS

.connectedSortable {
  float: left;
  height: 300px;
  padding-left: 0;
  list-style: none;
  width: 100px;
  border: 1px solid;
  overflow-y: scroll;
}

#sortable2 {
  text-align: right;
}

.centered_invisible {
  position: relative;
  float: left;
  margin: 0 auto;
  margin-top: 125px;
}

FIDDLE

您可以调整格式 - 边框只是为了显示边界框。