多个可拖动的列句柄

javacsript的新手和第一次从头开始编码web ...多个可拖动的列句柄

大家好。我试图实现可拖动列像这个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的随机拖动位置（每个负载）。（见附件）

来源

2016-10-05 Da Hao

首先你改变你的手柄一类：

<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/，还有很多其他的方法，使它，希望它帮助！

来源

2016-10-05 05:08:19

谢谢你。当我们说话时，我正在尝试。问题 - 这种方法是否允许我添加脚本来实现随机加载序列？我假设我需要能够分别处理这些手柄 –

我也很难试图将它们定位在高度......这是由位置引起的：绝对......有没有一种方法可以在没有这种情况下工作？我想自然地将它们堆叠起来，而不是一个接一个地使用顶部：xx px一路......有没有办法让div在容器内部自然堆叠？ –

$（'＃id'）选择带有该id的第一个元素，$（'。class'）选择具有该类的所有元素，然后返回一个odered数组。从我的理解，检查这jsfiddle.net/T4St6/293也许它有帮助。 –

多个可拖动的列句柄

回答

相关问题