JQuery UI Sortable - 목록에 자리 표시자를 추가하여 빈 칸을 시뮬레이트합니다.

JQuery UI Sortable은 간격이없는 목록에 적합하지만 간격이있는 항목 목록을 렌더링하려고합니다.JQuery UI Sortable - 목록에 자리 표시자를 추가하여 빈 칸을 시뮬레이트합니다.

1, 2, 빈, 4, 5, 6, 빈 8 수가 슬롯 번호를 나타내는

. 예상되는 동작은 사용자가 2 슬롯 위로 요소를 드래그하고 2 값이 빈 슬롯 3으로 푸시되고 사용자가 2 슬롯에 새 요소를 놓을 수있는 경우입니다. 반면에 새 요소를 빈 3 슬롯을 사용하면 목록 항목이 아래로 내려 가지 않고 사용자는 새 항목을 빈 3 슬롯에 놓을 수 있습니다. 희망적으로 이것은 의미가 있습니다.

JQuery UI Sortable 코드를 살펴 봤는데이를 달성하기 위해 변경 사항을 활용하고 콜백을 수신해야하지만 일반적으로 JQuery/JS에 익숙하지 않은 것으로 보입니다. 이 빈 슬롯 자리 표시자를 추가하고 선택 목록을 관리하여 사용자 지정 코드로 정렬 기능을 손상시키지 않게하려면 무엇을 사용해야합니까?

모든 포인터, 예제 등은 크게 감사하겠습니다.

는 잠시 동안 내 머리를 두드리는 후, 나는 jsFiddle을 만들어 : http://jsfiddle.net/pdHnX/

이 문제를 설명하기 위해. 나는 달성하려고하는 모든 것이 재정의 된 _rearrange 메소드에서 일어날 수 있다고 믿습니다. 바이올린 코드는 항목이 필러 항목을 대체하는 경우를 처리하지만 이상한 문제가 있습니다. 항목 목록에서 필러 목록으로 항목을 드래그하면 해당 항목을 놓은 다음 필러 목록에서 동일한 항목을 드래그합니다 필러 목록은 1로 줄어들므로 문제가됩니다.

더 많은 항목을 필러 목록으로 드래그하기 시작하면 더 많은 문제가 있지만, 지금은 문제가있는 부분입니다.

출처

2012-08-31 Tom Hartwell

이 질문과 매우 유사 : http://stackoverflow.com/questions/7177166/jquery-ui-sortable-how-to-replace-existing-item-or-insert-new-draggable- 이것이 설명하는 데 도움이되는지 생각해보세요. 내가 성취하려고하는 것 –

그래서 당신이 원했던 것은 아이템이 있던 곳에 남아있는 여러 플레이스 홀더입니까? 또한 새 항목이 이동 될 때 자동으로 모든 것을 아래로 밀 때 정상적으로 끌 때 어떤 일이 발생합니까? – Nal

죄송합니다. 자세한 내용은 매우 어려운 질문입니다. 요구 사항은 구체적이고 설명하기 어려웠습니다.

다음은 내가 찾던 해결책입니다.

다른 사람들은 여기에 답을 주었지만 잘못 설명 된 문제에 대한 해결책 이었지만 내가 찾던 내용이 아닙니다. 코드도 매우 털이가 연결되도록

http://jsfiddle.net/vfezJ/

는 불행하게도, sortable.js 코드는 매우 털이있다. 내가 게시 한 솔루션은 또한 CSS 클래스와 DOM ID에 대한 가정을 수행하여 작업을 완료합니다.

출처

2012-09-14 15:27:00

는 내가 제대로 이해한다면 모르겠지만, 여기에 내가 생각 해낸 무엇 :

http://jsfiddle.net/py3DE/

$(".source .item").draggable({ revert: "invalid", appendTo: 'body', helper: 'clone', 
    start: function(ev, ui){ ui.helper.width($(this).width()); }     // ensure helper width 
}); 

$(".target .empty").droppable({ tolerance: 'pointer', hoverClass: 'highlight', 
    drop: function(ev, ui){ 
     var item = ui.draggable; 
     if (!ui.draggable.closest('.empty').length) item = item.clone().draggable();// if item was dragged from the source list - clone it 
     this.innerHTML = '';              // clean the placeholder 
     item.css({ top: 0, left: 0 }).appendTo(this);        // append item to placeholder 
    } 
});

가정 :

당신이에서 항목을 드래그하면 상단 목록 - "복제"됩니다 (원본은 목록에 남아있을 것입니다)
만약 요 아래쪽 목록에서 항목을 드래그하십시오 - 빈 자리 표시자를 떠나 이동합니다
아래 목록의 자리 표시 자에 항목을 놓으면 - 자리 표시자를 바꿉니다.
아래 목록의 비어 있지 않은 자리 표시 자에 항목을 놓으면/항목 - 항상 같은

이 도움이된다면 알려 또는 다른 뭔가를 찾고있다 보자 유지 그것을 두 목록의

크기를 대체합니다. 또한

출처

2012-09-06 10:05:07 tborychowski

죄송합니다. 제 설명에서 문제를 올바르게 설명하지 못했습니다. –

동의합니다. 콜백을 사용하는 것이 이상적입니다. 다행히도 아래에 더 좋은 설명이 있습니다. UI는 '실제'항목 중 하나 인 목록과 '자리 표시 자'항목으로 시작하는 두 목록입니다. '실제'항목을 '자리 표시 자'항목 목록으로 드래그하면 실제 항목이 '자리 표시 자'항목 위에 놓이면 해당 항목은 Sortable 라이브러리의 자리 표시 자로 바뀝니다 (드롭 된 항목의 위치를 나타내는 스타일이 지정된 div 목록에). –

그건 쉬운 부분입니다. 동작의 하드 덩어리는 목록의 크기가 동일해야하므로 사용자가 해당 영역에서 다른 '자리 표시 자'로 드래그하면 목록의 크기가 동일하도록 이전 '자리 표시 자'를 복원해야합니다. 사용자가 목록에 '실제'항목을 드롭하고 다른 '실제'항목을 목록으로 드래그하면이 2 번째 '실제'항목은 '자리 표시 자'를 대체해야하지만 '실제'항목은 마우스를 놓을 때 'Sortable 도서관이 지금한다. –

http://jsbin.com/igozat/2

가 여기에 내가 채찍질 뭔가 :-) 도움이 될 수 있습니다 (이 드래그의 목적은 무엇) 전체 작업을 설명. 그것은 sortable()이 중간 드래그를 중단 할 수 없기 때문에 완벽하지 않거나 많은 크레딧을받을 가치가 없습니다. 그럴 수 있다면 드롭 액션이 완전히 대신 할 수 있습니다.또한, 다시 정렬 내 시도는 버그가 있었다. 이 메서드는 그냥 일반 jQuery와 함께 작동하지만 jQuery UI를 사용하면 작동하지 않는다는 것을 알고 있습니다.

저크 인 것처럼 들리므로 jQuery 만 사용하여이 기능을 작성해 보겠습니다. jQuery UI가 그 모든 것들을 부수는 것은 아닙니다. : P

출처

2012-09-11 17:49:40

JQuery UI Sortable - 목록에 자리 표시자를 추가하여 빈 칸을 시뮬레이트합니다.

답변

관련 문제