onclick 检索所有已删除元素的绝对位置字符串

Question

在搜索了一天并尝试了一些解决方案后，我都没有。

Draggables 是<ul> 中的列表项。 Droppable 在它旁边的 div 上。现在基本的拖动，现在克隆没有帮助。

点击我想：

• 从可放置区域获取所有可拖动位置。 （相对于文档的绝对位置）

  • 注意：可拖动位置中的每个 <li> 都有一个唯一 ID。 （可拖动列表是从 ajax 回调构建的，因此在解析 xml 时添加了 id：<li id="'+uid+'">...
  • 我希望以字符串格式检索所有位置，例如： var send_new_positions = "id1;x1,y2;id2;x2,y2";示例：“1;108,57”表示：li，id=1，xPos=108，yPos=57。

问题：

我不能以老式的方式 onclick 收集可拖动区域内的所有列表项，因为没有任何列表项。在调试器中我发现它们不是这样工作的，droppable 保持干净，draggables 使用内联样式更新，例如：<li style="position: relative; left: -270px; top: 127px;" class="ui-draggable dropped">...

我是否应该为可拖动对象构建一个选择器，以找到每个 <li> 的类“ui-draggable dropped”，然后提取位置？ 我认为这是更难的方法，毕竟我只获得相对位置。

我是否应该将我的逻辑添加到 drop: function() 并将我的字符串格式添加到每个被删除的<li>。如果是这样，我应该如何将此字符串数据附加到每个删除的<li>？

最好的方法是什么？

Answer 1

循环所有可拖动元素并构造字符串：

$('#myButton').click(function(){
    var myStringPosition = null;
    $('.ui-draggable').each(function(){
        myStringPosition = $(this)[0].id + ';' + $(this).css('left') + ';' + $(this).css('top');
    });

    alert(myStringPosition);
});