多個可拖動的列句柄

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也許它有幫助。 –

多個可拖動的列句柄

回答

相關問題