Ручки с несколькими перетаскиваемыми колонками

Question

Новое в javacsript и первый раз кодирование сети с нуля ...

Привет всем. Я пытаюсь добиться перетаскивать столбцы, как это Js скрипку я нашел здесь на стек: http://jsfiddle.net/T4St6/

мне удалось заставить его работать на моей сети: http://www.dariusou.com/, но я понятия о том, как сделать несколько колонок, что поскольку сценарий ориентированы на дивах специально (слева, справа):

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

ли этот код удобно достичь того, чего я хочу, или я должен искать другой код для работы с? (Я не могу писать сценарии с нуля все же) То, что я пытаюсь достичь, - это просто перетаскиваемые столбцы с ручками, но несколько из них, например, изображение, прикрепленное к этому сообщению.

В идеале я хотел бы, чтобы достичь случайное положения сопротивления для каждого из этих див (при каждой загрузке) в будущем (см. Приложенный)

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/, есть много других способов сделать это, надеюсь, что это помогает!