多个可拖动的列手柄

Question

javacsript新手，第一次从头开始编写网页......

大家好。 我正在尝试实现像我在堆栈上找到的这个js小提琴那样的可拖动列：     http://jsfiddle.net/T4St6/

我成功地使其适用于我的网站：http://www.dariusou.com/但是由于脚本专门针对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（每次加载）实现一个随机拖动位置。（见附件）

Answer 1

首先，您将句柄更改为类：

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

定义你的班级行为：

$('.handle').on('mousedown', function (e) {
     target = e.target.id; //store the id
     isResizing = true;
     lastDownX = e.clientX;
});

添加更多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>

调整大小取决于目标句柄：

if(target == 'handle'){
     left.css('right', offsetRight);
     right.css('width', offsetRight);
} else if(target == 'handle2'){
     left2.css('right', offsetRight);
     right2.css('width', offsetRight);
}

检查这个小提琴：jsfiddle.net/T4St6/292/，还有很多方法可以做到，希望它有所帮助！