Question

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

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

我正在显示图像而不是＆＃34;项目A项目B ..＆＃34;现在我需要在两个人之间显示一条线，而其中一个是“一个人”。正在移动。

编辑：也就是说，当我点击＆＃34;并选择＆＃34;将图像拖放到已经存在的图像列表中，我希望显示一个＆＃39;分隔线＆＃39;在我当前悬停的图像之间，以便在用户释放鼠标点击时向用户指示图像将被放置在何处。

在附加的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，它会自动将占位符元素插入目标位置。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

为我工作!!

我怎样才能找到下面的元素到另一个元素？

2 个答案: