Question

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

我的网站如何显示 enter image description here

如您所见：我可以对.panelgroup进行排序。.content_left和.content_right。此外，我可以调整所有.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和position），我只是为了向您展示，但我只想使用.getBoundingClientRect（）。

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

我没有做高度的东西，但我相信你能搞清楚。在.forEach循环中，只需获取每个项目.height（）并将其附加到坐标对象。

希望这有帮助！

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

1 个答案: