Google의 CDN에서 jQuery 1.7 및 jQuery UI 1.8을 사용하고 있습니다. (최신 버전이기 때문에).jQueryUI Sortable - 두 개의 Sortable을 동시에 이동하십시오.
내 페이지에는 두 개의 요소, 머리글 탐색 및 각 머리글 목록 항목에 해당하는 컨테이너가있는 콘텐츠 영역이 있습니다. 현재 Sortable을 둘 다에 첨부하여 탐색 요소와 콘텐츠 컨테이너 (개별적으로)의 시각적 순서를 다시 정렬 할 수 있습니다. 달성하려고하는 동작은 탐색 요소를 끌 때 컨텐트 컨테이너가 함께 이동하고 목록 내의 새 위치에 탐색 요소를 놓으면 컨텐트 컨테이너가 컨텐트의 새 위치에 고정됩니다 지역뿐만 아니라. 내가 일하고 웹 사이트는 인트라넷 페이지입니다, 그래서 링크를 제공 할 수 없습니다,하지만 난 아래도 포함했다 : NavOne 및 NavTwo 사이 NavThree를 드래그 한 후
Navigation:
NavOne...NavTwo...NavThree
Content:
ContentOne...ContentTwo...ContentThree
을, 전체 배열은 다음과 같아야합니다
를Navigation:
NavOne...NavThree...NavTwo
Content:
ContentOne...ContentThree...ContentTwo
두 개의 Sortable을 연결하는 간단한 방법이 있나요? 그것은 실제로 이 부드럽거나 "라이브"가되도록을 가지고 있지 않습니다 (그러나 나는 그것이 정말로 좋을지라도). 첫 번째 목록에서 재정렬이 완료 (삭제) 될 때까지 두 번째 정렬 가능 목록을 새로 고치지 않아도됩니다.
나는 이미 jQuery를 UI 포럼에 이상이 질문을하고 응답을 일주일 기다렸: 여기 [LINK]
내가 실제 프로젝트에 이동하기 전에이에 대한 테스트있어 골격의 샘플입니다 :
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
/* This is my CSS */
/* Basic reset -- outline for debugging */
* {padding: 0px; margin: 0px; outline: 1px solid rgba(0,0,0,0.1);}
html {width: 100%; height: 100%;}
body {width: 100%; height: 100%;}
/* Main styles */
.containerDiv {
overflow-x: scroll;
overflow-y: hidden;
width: 800px;
height: 600px;
white-space: nowrap;
float: left;
}
.itemDiv {
width: 200px;
height: 500px;
display: inline-block;
}
.navBar ul, .navBar li {
display: inline;
}
</style>
</head>
<body>
<!-- This is my HTML -->
<div class="navBar">
<ul>
<li id="nav1">Navigation 1</li>
<li id="nav2">Navigation 2</li>
<li id="nav3">Navigation 3</li>
</ul>
</div>
<div class="containerDiv">
<div class="itemDiv" id="item1">Item 1</div>
<div class="itemDiv" id="item2">Item 2</div>
<div class="itemDiv" id="item3">Item 3</div>
</div>
</body>
<script>
/* This is my JavaScript */
// Make containerDiv children sortable on X-axis
$(".containerDiv").sortable({
axis: "x"
});
// Make nav children sortable on x-axis
$(".navBar").sortable({
axis: "x",
items: "li"
});
// Bind sorting of each (.navBar li) to its corresponding (.containerDiv .itemDiv):
$(".navBar li").bind("mouseup", function(event,ui){
// If I use "sortupdate" I get little to no response. If I use "mouseup",
// I can at least get an alert to return the value of thisId.
// Note: I am sad that console.log is blocked in Firefox,
// because its DOM inspector is better than Chrome's
// the (.navBar li) have ids of "nav1, nav2" and so on,
// and the (.containerDiv .itemDiv) have corresponding ids of "item1, item2"
// which is my way of attempting to make it easier to link them.
// This line is my attempt to target the (.containerDiv .itemDiv) which directly
// corresponds to the (.navBar li) which is currently being sorted:
var tempId = "#" + $(this).attr('id').replace("nav","item");
// When this (.navBar li) is updated after a sort drag,
// trigger the "sortupdate" event on the corresponding (.containerDiv .itemDiv):
$(tempId).trigger("sortupdate");
});
</script>
</html>
그 해에 여러 가지 가능한 솔루션을 시도했지만 그 중 아무도 내가 원하는 방식으로 작동하지 않았습니다. 이것은 상대적으로 단순해야한다고 생각하지만, 일주일 내로 (off와 on) 일할 때, 나는 아무데도 유용하지 않다. 몇 가지 통찰력을 찾고있는 동안
는 이미 다음 관련 스레드를 읽었습니다 :
- dragging multiple list items simultaneously
- JQuery Draggable + Sortable: How to tell if item was actually added to my sortable list?
- Sorting multiple items at the same time using jQuery UI
- jQuery UI Sortable: Multi-item select
- Is it possible to link two jquery.ui draggables together?
나는 다른 모든 것들을 실패했다면 적어도 sortable을 직렬화하고, 서버에 아약스 한 다음, 직렬화 된 데이터를 기반으로 두 번째 목록을 업데이트 할 수 있어야한다고 생각한다.하지만 이것을 계속 유지하고 싶다. 로컬 브라우저를 사용하여 서버에 대한 호출을 줄입니다 (사용자가 새 계약을 계정에 저장할 때까지).
그래서 StackOverflow ...이 작업은 내가 달성하려고하는 합리적인/달성 가능한 작업입니까, 아니면 방금 벽돌을 머리에 맞고 있습니까? 나는 그것을 할 다른 방법을 찾아야합니까? 가능하다면 Sortable 플러그인을 수정하는 것을 피하고 싶습니다. 그렇지만해야한다면, 그렇게해야합니다.
그래서 여기있다, 내가 전에 jsFiddle을 사용한 적이 있지만, 나는 그것이 아마 도움이 실현 : http://jsfiddle.net/34u7n/1/
나는 그 장면을 주었고, 실제로 경보를 울린다. '.itemDiv'에서'sortupdate'를 트리거하기 위해 그것을 사용하려고 시도했을 때, 효과가없는 것처럼 보입니다. 나는'.itemDiv'를 정렬 할 때 작동하는'.itemDiv'에서'update' 이벤트가 발생했을 때'alert'를 호출하는 익명의 함수를 붙이기도했지만, onSort 함수에서 호출 할 때 실행되지 않습니다. '$ (tempId) .trigger ("sortupdate")'또는'$ (tempId) .trigger ("update")'를 사용하십시오. 내가 놓친 게 있니? http://jsfiddle.net/adriantp/v88QS/1/ – Adrian
다른 목록의 항목을 'sortupdate'하여 다른 목록의 항목을 위치로 옮길 것을 기대하는 이유가 표시되지 않습니다. 당신이 들어가기를 원한다면 나는 최근에 옮겨진 아이템의 새로운 위치를 확인하고 해당 아이템의 위치를 새로운 위치로 설정해야한다고 생각했을 것입니다. jQuery에 대해 잘 모르겠다면 잘 모르겠지만'sortupdate'를 호출하여 항목을 이동할 위치를 어떻게 알아야하는지 모르겠습니다. – Servy
나는 왜 내가 그 일을하기를 기대했는지 모른다. 반사 후에 그것은 이해가 가지 않는다; 이벤트는 액션의 결과로 발생하지만 다른 방향으로는 발생하지 않습니다. 제 옵션은 navbar를 직렬화하고 직렬화 된 데이터를 사용하여 (다른 기능을 통해) 컨텐트 항목의 순서를 변경하거나 정렬 가능한 플러그인을 확장하여 새로운 순서를 전달하고 해당 항목의 업데이트/새로 고침을 허용하는 것입니다. 정렬 가능. – Adrian