jQuery 我似乎在尝试这个错误，我想在一个中央容器内向左或向右滑动多个动态元素

Question

我有一个具有这种结构的动态布局。通过这种结构，我需要将项目向左或向右分组滑动。 ztsWorkSpaceBar 将是我想要滑过的容器元素。 ztsWorkSpaceBarCenter 是所有这些内容所在的主容器。问题是可能有 1 个或 100 个 ztsWorkSpaceBar，正如我所说，它是动态的，因此我的代码应该反映这一点。我尝试了一些方法，其中大多数没有效果，或者产生错误的效果...

<div id="ztsWorkspaceBarCenter">
    <div class="ztsWorkSpaceBar">
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="0" class="ztsWorkSpaceItem">0</div>
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="1" class="ztsWorkSpaceItem">1</div>
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="2" class="ztsWorkSpaceItem">2</div>
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="3" class="ztsWorkSpaceItem">3</div>
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="4" class="ztsWorkSpaceItem">4</div>
    </div>
    <div class="ztsWorkSpaceBar">
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="5" class="ztsWorkSpaceItem">5</div>
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="6" class="ztsWorkSpaceItem">6</div>
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="7" class="ztsWorkSpaceItem">7</div>
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="8" class="ztsWorkSpaceItem">8</div>
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="9" class="ztsWorkSpaceItem">9</div>
    </div>
    <div class="ztsWorkSpaceBar">
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="10" class="ztsWorkSpaceItem">10</div>
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="11" class="ztsWorkSpaceItem">11</div>
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="12" class="ztsWorkSpaceItem">12</div>
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="13" class="ztsWorkSpaceItem">13</div>
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="14" class="ztsWorkSpaceItem">14</div>
    </div>
    <div class="ztsWorkSpaceBar">
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="15" class="ztsWorkSpaceItem">15</div>
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="16" class="ztsWorkSpaceItem">16</div>
        <div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="17" class="ztsWorkSpaceItem">17</div>
    </div>
</div>

在撰写本文时，我的最后一次尝试是使用边距+/-，但我尝试了向左、宽度等...似乎没有任何效果。我只是希望整个容器能够流畅地向左或向右滑动，或者无论你想怎么说。下一个容器将跟随它进入，有点像滑块效果。

$('#ztsWorkspaceBarLeft').click(function(){console.log('left');$('#ztsWorkspaceBarCenter').find('.ztsWorkSpaceBar').filter(':visible:first').animate({margin: -580+'px'}, 900);});
$('#ztsWorkspaceBarRight').click(function(){console.log('right');$('#ztsWorkspaceBarCenter').find('.ztsWorkSpaceBar').filter(':hidden:last').animate({margin: 580+'px'}, 900);});

Answer 1

看起来 JQuery UI 可排序网格可能就是您正在寻找的。您可能需要将 div 转换为 ul 和 li 元素，但通过一些 css 样式，您可以使它们在所有浏览器中显示相同。 http://jqueryui.com/demos/sortable/#display-grid