여러 개의 드래그 가능한 열 핸들

Question

javacript를 처음 사용하면서 처음부터 웹을 코딩하는 ...

안녕하세요. 나는 내 웹을 위해 일하기에 성공 http://jsfiddle.net/T4St6/

:이 바이올린 JS처럼 내가 드래그 열을 달성하기 위해 노력하고있어 나는 스택에 여기 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

먼저 당신이 당신의 핸들을 변경 (첨부 참조) 클래스 :

$('.handle').on('mousedown', function (e) { 
    target = e.target.id; //store the id 
    isResizing = true; 
    lastDownX = e.clientX; 
}); 

0 :

<div id='handle' class="handle"></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/, 그것을 만들 수있는 많은 다른 방법이 도움이 희망이 있습니다!