javascript - 多个可拖动的列 handle

Question

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

大家好。 我正在尝试实现可拖动的列，就像我在堆栈上找到的这个js fiddle 一样: 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);
}

检查这个 fiddle :jsfiddle.net/T4St6/292/ ，还有很多其他的制作方法，希望对你有帮助!