Javascript 多个可拖动的列句柄

JavaCScript新手，第一次从头开始编写web

大家好。 我正在尝试实现可拖动的列，如我在堆栈中找到的js fiddle：

我成功地让它为我的web工作：但我不知道如何制作多个列，因为脚本专门针对div左、右：

var isResizing = false,
lastDownX = 0;

$(function () {
var container = $('#container'),
    left = $('#left'),
    right = $('#right'),
    handle = $('#handle');

handle.on('mousedown', function (e) {
    isResizing = true;
    lastDownX = e.clientX;
});

$(document).on('mousemove', function (e) {
    // we don't want to do anything if we aren't resizing.
    if (!isResizing) 
        return;

    var offsetRight = container.width() - (e.clientX - container.offset().left);

    left.css('right', offsetRight);
    right.css('width', offsetRight);
}).on('mouseup', function (e) {
    // stop resizing
    isResizing = false;
});
});

这段代码是否能方便地实现我想要的，或者我应该寻找另一段代码来工作？我不能从头开始写脚本，但我试图实现的只是这种带有句柄的可拖动列，但有多个句柄，就像附在这篇文章上的图片。

理想情况下，我还希望在将来的每个负载上为每个div实现一个随机拖动位置。请参阅附件

---

首先，将句柄更改为类：

<div id='handle' class="handle"></div>

添加更多div：

<div id="left2"> This is the left side's content! </div>
    <!-- Right side -->
    <div id="right2">
        <!-- Actual resize handle -->
        <div id='handle2' class="handle"></div> This is the right side's content!
    </div>

---

检查一下这把小提琴：，还有很多其他的制作方法，希望能有所帮助

首先将句柄更改为类：

<div id='handle' class="handle"></div>

添加更多div：

<div id="left2"> This is the left side's content! </div>
    <!-- Right side -->
    <div id="right2">
        <!-- Actual resize handle -->
        <div id='handle2' class="handle"></div> This is the right side's content!
    </div>

---

检查一下这把小提琴：，还有很多其他的制作方法，希望能有所帮助

谢谢你。我现在正在试着解决这个问题。问题-此方法是否允许我添加脚本以实现随机加载序列？我想我需要能够分别定位把手我也很难用高度来定位把手。。。这是由位置引起的：绝对。。。有没有一种方法可以在没有它的情况下工作？我想自然地堆叠它们，而不是一直使用top:xx px逐个定位它们……有没有一种方法可以让div在容器中自然地堆叠？$'id'是选择第一个id为$'的元素。class'是选择所有该类的元素，然后返回一个有序数组。据我所知，检查这个jsfiddle.net/T4St6/293也许会有帮助。哇，这正是我想要的。。。不幸的是，这个脚本在编码方面超出了我的知识范围。。你能解释一下里面发生了什么吗？现在一切都由类i定义，不再有单独的div ID了？这是因为我需要在每个div中放一个幻灯片，现在html只包含container div，我现在很困惑，在左和右的外部添加一个div，并使用position:relative；高度：？px；很好，谢谢你。我现在正在试着解决这个问题。问题-此方法是否允许我添加脚本以实现随机加载序列？我想我需要能够分别定位把手我也很难用高度来定位把手。。。这是由位置引起的：绝对。。。有没有一种方法可以在没有它的情况下工作？我想自然地堆叠它们，而不是一直使用top:xx px逐个定位它们……有没有一种方法可以让div在容器中自然地堆叠？$'id'是选择第一个id为$'的元素。class'是选择所有该类的元素，然后返回一个有序数组。据我所知，检查这个jsfiddle.net/T4St6/293也许会有帮助。哇，这正是我想要的。。。不幸的是，这个脚本在编码方面超出了我的知识范围。。你能解释一下里面发生了什么吗？现在一切都由类i定义，不再有单独的div ID了？这是因为我需要在每个div中放一个幻灯片，现在html只包含container div，我现在很困惑，在左和右的外部添加一个div，并使用position:relative；高度：？px；很好。