我怎样才能找到低于另一个元素的元素？

Question

我正在尝试使用 jquery UI 拖动和排序图像。我已经克隆了我正在尝试拖动的元素。我需要根据克隆的图像位置在两个图像之间显示一条线。我怎样才能做到这一点？提前致谢。

这是一个例子。 http://jsbin.com/owuxek/9/edit?html,js,output

我正在显示图像而不是“项目 A 项目 B..”现在我需要在两个 li 之间显示一条线，而一个 'li' 正在移动。

编辑：也就是说，当我单击“并选择”图像并将其悬停在已经存在的图像列表上时，我希望在我当前悬停的图像之间显示一条“分隔线”，例如如果用户释放鼠标单击，则向用户指示图像将放置在哪里。

在附加的 JSbin 代码中，当我从上面的列表中移动一个元素并尝试将其移动到下面的列表中时，下面的列表元素之间会出现一个小的白色分隔空间，鼠标悬停在该空间上。我需要为下面的元素布局复制这种效果。

<div id="single_album_grid" class="sortable">
  <div id="divId1">
    <img class="assetImg"  id="imageId1"  src="url">
  </div>

  <div id="divId2">
    <img class="assetImg"  id="imageId2"  src="url">
  </div>

  <div id="divId3">
    <img class="assetImg"  id="imageId3"  src="url">
  </div>
</div>

这是我更新的代码：

$( "#divId1" ).draggable({ 
    containment: $('#single_album_grid'), 
    helper: 'clone' 
    });

    $( "#divId1" ).droppable({
                drop: function(event, ui) {
                }

            });

Answer 1

如果你使用 jquery UI sortable widget，它会自动在目标位置插入一个占位符元素。

您可以通过 css 使用 .ui-sortable-placeholder 选择器将其设置为线条或其他任何您想要的样式。

---

$(function() {
  $("#single_album_grid").sortable()
});

div div {
  height: 50px;
  background: dodgerblue;
  border: 2px solid white;
}
.ui-sortable-placeholder {
  visibility: visible !important;
  height: 5px;
  background: hotpink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="single_album_grid" class="sortable">
  <div id="divId1">
    <!--img class="assetImg" id="imageId1" src="url"-->
  </div>

  <div id="divId2">
    <!--img class="assetImg" id="imageId2" src="url"-->
  </div>

  <div id="divId3">
    <!--img class="assetImg" id="imageId3" src="url"-->
  </div>
</div>

Answer 2

over: function (event, ui) { 
   //code here 
}
out: function (event, ui) { 
  //code here
}

为我工作！！