드래그 앤 드롭하여 순서를 변경하세요.
kn3l
여기에 코드를 넣었습니다. http://jsfiddle.net/yPQZx/394/
HTML
<div id="example5">
<ul>
<li>Start</li>
<li>TOC</li>
<li >section 1
<ul>
<li>chapter 1
<ul>
<li>sub chapter1</li>
<li>sub chapter2</li>
</ul>
</li>
<li >chapter 2<ul></ul></li>
<li >chapter 3<ul></ul></li>
</ul>
</li>
<li >section 2<ul></ul></li>
<li >section 3<ul></ul></li>
<li >section 4<ul></ul></li>
</ul>
jQuery
$("#example5 ul").sortable({
connectWith: "#example5 ul li",
placeholder: "ui-state-highlight"
});
$("#example5 ul li ul ").sortable({
connectWith: "#example5 ul li ul",
placeholder: "ui-state-highlight"
});
CSS
ul { min-height:10px; }
li { width: 150px; }
누구든지 이것을 달성하도록 도울 수 있습니까?
- 하위 장은 섹션 바로 아래가 아닌 해당 장 또는 다른 장 내에서만 이동할 수 있습니다.
- 장은 섹션의 형제가 아닌 장 내부가 아닌 섹션 또는 다른 섹션 내에서만 이동할 수 있습니다.
- 장이 이동되면 모든 하위 장도 함께 이동됩니다.
- 섹션은 다른 섹션, 장 또는 하위 장이 아닌 루트 위치에서만 이동할 수 있습니다!
미리 감사드립니다.
SarathSprakash
작동 데모
이 시도
$("#example5>ul>li>ul ").sortable({
connectWith: "#example5>ul>li>ul",
placeholder: "ui-state-highlight"
});
$("#example5>ul>li>ul>li>ul ").sortable({
connectWith: "#example5>ul>li>ul>li>ul",
placeholder: "ui-state-highlight"
});
$("#example5>ul>li").sortable({
connectWith: "#example5>ul>li",
placeholder: "ui-state-highlight"
});
$("#example5>ul").sortable({
connectWith: "#example5>ul",
placeholder: "ui-state-highlight"
});
도움이 되었기를 바랍니다. 감사합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
야간 시계를 사용하여 드래그 앤 드롭
- 2
AngularJS를 사용하여 div 드래그 앤 드롭
- 3
jquery를 사용하여 jsp의 드래그 앤 드롭 기능
- 4
jquery를 사용하여 jsp의 드래그 앤 드롭 기능
- 5
jquery를 사용하여 이미지 드래그 앤 드롭
- 6
jQuery를 사용하여 드래그 앤 드롭 스왑
- 7
TFS Sprint 변경 순서 드래그 앤 드롭
- 8
드래그 앤 드롭 자바에서 StyledDocument를 사용하여 정렬
- 9
드래그 앤 드롭 자바에서 StyledDocument를 사용하여 정렬
- 10
드래그 앤 드롭 된 요소를 드래그 가능하면서 드롭 가능하게 만들기
- 11
ListWidget에서 ComboBox로 드래그 앤 드롭하는 방법
- 12
ScrollViewer에서 드래그 앤 드롭이 작동하지 않음
- 13
Extjs5를 사용하여 트리에서 그리드로 사용자 정의 드래그 앤 드롭
- 14
HTML5 : 드래그 앤 드롭으로 ul의 자식 li 순서를 변경하면 li 요소 사이의 경계가 누락됩니다.
- 15
HTML5 : 드래그 앤 드롭으로 ul의 자식 li 순서를 변경하면 li 요소 사이의 경계가 누락됩니다.
- 16
jquery에서 드래그 앤 드롭을 사용하여 입력 필드를 재정렬하는 방법
- 17
jQuery UI Sortable 및 Bootstrap 그리드를 사용하여 Hubspots 드래그 앤 드롭 양식 작성기 UI 복제
- 18
JQuery를 사용하여 이미지를 드래그 앤 드롭하고 업로드 할 수 있습니까?
- 19
드래그 앤 드롭 플러그인을 드래그하여 HTML 컨트롤
- 20
여러 드래그 앤 드롭이 작동하지 않음
- 21
드래그 앤 드롭 (Swift macOS)을 사용하여 파일 경로를 얻습니까?
- 22
드래그 앤 드롭을 사용하여 .clone을 시작하거나 jquery를 클릭하는 방법
- 23
드래그 앤 드롭 후 레코드를 업데이트하는 방법
- 24
드래그 앤 드롭으로 구성하는 VS2012 메서드
- 25
Firebase 목록 / FirebaseListObservable을 사용하여 Angular2에서 드래그 앤 드롭을 구현하는 방법
- 26
드래그 앤 드롭, 드래그 요소 ID 및 ID를 놓을 위치
- 27
캔버스를 사용하여 몸 주위로 이미지를 드래그 앤 드롭
- 28
Ajax의 드래그 앤 드롭을 사용하여 서버의 파일 이름 지정
- 29
MVVM을 사용하여 Windows Phone의 목록에서 캔버스로 드래그 앤 드롭
몇 마디 만하겠습니다