두 열의 재주문을 위해 jQuery 정렬 가능?

Question

모두 안녕. 다음은 시나리오입니다. 아래 코드가 있으며이 열 내에서 항목을 재 배열해야합니다. 문제는 ... 항목이 반드시 포함 된 열에 남아있을 필요는 없으며 사용자에 따라 앞뒤로 전환 할 수 있어야합니다. 다음은 샘플 코드입니다.

<div id="container">
    <div id="left-col">
        <div class="wrapper">
            <div class="item">
                <h2>Row 1 Column 1</h2>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
        <div class="wrapper">
            <div class="item">
                <h2>Row 2 Column 1</h2>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
    </div><!-- end left-col -->
    <div id="right-col">
        <div class="wrapper">
            <div class="item">
                <h2>Row 1 Column 2</h2>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
        <div class="wrapper">   
            <div class="item">
                <h2>Row 2 Column 2</h2>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
    </div><!-- end right-col -->
</div>

그리고 관련된 CSS :

#container {
            border: 1px solid black;
            overflow: hidden;
            margin: auto;
        }
        #container .wrapper {
            width: 100%;
        }
        #container #left-col .item {
            margin: .5em .25em .5em .5em;
            border: 1px solid black;
        }
        #container #right-col .item {
            margin: .5em .5em .5em .25em;
            border: 1px solid black;
        }
        #left-col, #right-col { width: 50%; }
        #left-col { float: left; }
        #right-col { float: right; }
        .item h2 { background: #ccc; }

jQuery 정렬 플러그인을 사용하여 코드에서 래퍼 요소를 정렬/주문 할 수 있는지 또는 내 솔루션을 굴려야하는지 궁금합니다. 요소를 정렬하고 싶다면 플러그인이 작동 할 수 있습니다. 이내에 왼쪽 또는 오른쪽 열이지만 서로 사이에는 아닙니다. 모든 도움은 대단히 감사하겠습니다.

Answer 1

더 쉬운 솔루션이 있음이 밝혀졌습니다. Robert와 그가 제공 한 링크의 도움 으로이 솔루션은 잘 작동합니다.

$(function() {
    $("#left-col").sortable({
        handle: '.item h2',
        connectWith: '#right-col'
    }).disableSelection();
    $("#right-col").sortable({
        handle: '.item h2',
        connectWith: '#left-col'
    }).disableSelection();
});

앞서 언급했듯이 정렬 가능하면 각 항목을 정렬 할 수 있습니다. 이내에 존경받는 열이지만 반대 열 위에 "떨어 뜨릴 수는 없습니다. 정렬 가능한 플러그인의 ConnectWith 속성을 사용하면 정렬 할 수있는 다른 정렬 가능한 객체를 지정할 수 있습니다. 모든 도움에 감사드립니다.

Answer 2

테이블 러 플러그인은 필요한 작업을 수행해야합니다. 테이블과 함께 작동하지만 매우 유연합니다. 숫자에 대한 특별한 취급도 있습니다. 현재 작업중인 프로젝트에서 사용하고 있습니다.

http://www.tablesorter.com/

Answer 3

그만큼 jQuery UI 정렬 가능 열 내에서 항목을 위아래로 움직일 수 있어야합니다.

http://jqueryui.com/demos/sortable/

jQuery 사이트에도 정렬 가능 현재 작동하지 않는 데모가있는 페이지.

당신은 또한 필요할 수 있습니다 jQuery UI 배설 가능 :

http://jqueryui.com/demos/droppable/

드롭 가능하면 한 열에서 다른 열로 드래그 앤 드롭을 드래그 앤 드롭 할 수 있습니다. jQuery 사이트에서 Droppable 링크는 다음과 같습니다 (이 데모는 작동합니다).

http://docs.jquery.com/ui/api/1.7/droppable

Answer 4

드래그/드롭 솔루션을 사용하려면 Threedubmedia JQuery UI 라이브러리보다 훨씬 빠르고 부풀어 오른 버전이 있습니다.

내 데모는 여기. 목록 사이에 이름을 이동할 수 있지만 목록 내에서 정렬되지는 않습니다. 그래도 쉬운 변화가되어야합니다.

Answer 5

여기에서 예제를 얻을 수 있습니다. 아름다운 것은 Igoogle 인터페이스를 흉내냅니다.igoogle