多个可拖动的列句柄

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;
});
});

这段代码是否可以方便地实现我想要的，还是我应该寻找其他代码来工作？（我还不能从头开始编写脚本）我想要实现的只是这种带有句柄的可拖动列，但其中有多个，就像附加到此 post 的图像一样。

理想情况下，我还想在未来为这些 div 中的每一个（在每次加载时）实现随机拖动位置。（见附件）

Answer 1

首先，您将句柄更改为 class:

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

定义您的 class 行为：

$('.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/，还有很多其他的制作方法，希望对您有所帮助！

多个可拖动的列句柄

Multiple draggable column handles

html

javascript

draggable