jQuery UI：在 cookie 中保存 div 的高度和位置

Question

我有几个可排序和调整大小的 div 框（使用 jQuery UI）。现在我想保存它们的位置（可排序）和它们的高度（可调整大小），以便我可以读出它们的值并为 div 提供它们的位置和大小。

我的网站是什么样子的

如您所见：我可以在 ..content_left 和 .content_right 中对 .panelgroup 进行排序。此外，我可以调整所有.panelcontent 的高度

现在我想保存每个.panelgroup 的位置和每个.panelcontent 的高度。

HTML

<script>
$( ".panelcontent" ).resizable({handles: \'s\'});
$(".content_right, .content_left").sortable({
    handle: ".panelheadbar",
    connectWith: ".ui-sortable",
    appendTo: "body",
    helper: "clone",
    zIndex: 1000
}).disableSelection();
$( ".togglepanelcontent" ).click(function() {
    var icon = $( this );
    icon.closest( ".panelgroup" ).find( ".panelcontent" ).toggle("slide", {direction: "up", duration: "slow", easing: "easeOutQuart"});
});
</script>
<div class="content_left ui-sortable">
    <div id="modul_1" class="panelgroup">
        <div class="panelheadbar pgrau">Module 1<div class="togglepanelcontent"><span>--</span></div></div>
        <div id="pc_1" class="panelcontent ui-resizable">
            text
        </div>
        <br>
    </div>
    <div id="modul_2" class="panelgroup">
        <div class="panelheadbar pgrau">Module 2<div class="togglepanelcontent"><span>--</span></div></div>
        <div id="pc_2" class="panelcontent ui-resizable">
            text
        </div>
        <br>
    </div>
</div>
<div class="content_mid"></div>
<div class="content_right ui-sortable">
    <div id="modul_3" class="panelgroup">
        <div class="panelheadbar pgrau">Module 3<div class="togglepanelcontent"><span>--</span></div></div>
        <div id="pc_3" class="panelcontent ui-resizable">
            text
        </div>
        <br>
    </div>
    <div id="modul_4" class="panelgroup">
        <div class="panelheadbar pgrau">Module 4<div class="togglepanelcontent"><span>--</span></div></div>
        <div id="pc_4" class="panelcontent ui-resizable">
            text
        </div>
        <br>
    </div>
</div>

CSS

.panelheadbar       {   padding: 5px; font-weight: bold; color: #000; overflow: hidden; height: auto; cursor: move;
                        border-bottom: 1px solid <?=$usercolor_css?>; }
.pgrau              {   background-color: #ccc; }
.panelcontent       {   overflow: auto; overflow-x: hidden;padding: 10px; top: 0px; left: 0px;
                        background-color: #FFF; border-left: 1px solid #333; border-right: 1px solid #333; border-bottom: 1px solid #333; }
.togglepanelcontent {   float: right; cursor: pointer; }

您知道如何保存这些值，以便网站立即显示之前的高度和位置吗？

Answer 1

var sortableElements, coordinates;

$(".content_left").sortable({
  update: function( event, ui ) {

      sortableElements = $(this).sortable("toArray");
      console.log( sortableElements ); // ID's of sortable items in current order

      sortableElements.forEach(function(item) {
          coordinates = document.getElementById(item).getBoundingClientRect();
          console.log(coordinates); // object of coordinates for each sortable item
      });

      console.log(ui.originalPosition) // object of original coordinates for moved item
      console.log(ui.position) // object of current coordinates for moved item

      // Set a cookie with array of items
      localStorage.setItem("cookieName", JSON.stringify(sortableElements));
  }
});

我在这里提供了一个很好的评论小提琴：https://jsfiddle.net/aqtq64n1/1/。打开您的控制台并检查一下。

另外，查看 .sortable API 操作：http://api.jqueryui.com/sortable/

您可以调用 .update，然后从那里调用 $(this).sortable("toArray") 以获取当前顺序中项目 ID 的数组

然后我循环该数组并使用神奇的 .getBoundingClientRect() 函数为每个项目返回一个坐标对象。

Sortables 的 .update 操作还会返回一组关于已移动项目的数据（即 originalPosition 和位置），我包含这些数据只是为了向您展示，但我只会使用 .getBoundingClientRect()。

然后我只是使用 localStorage 来保存您想要的项目。

我没有做身高的事情，但我相信你能弄清楚。在 .forEach 循环中，只需获取每个项目 .height() 并将其附加到坐标对象。

希望这会有所帮助！