Search jQuery

jQuery Forum

jQueryUI Sortable Items -- Make Two Sortables Move Simultaneously

in Using jQuery UI • 1 year ago

I have two elements on my page, a header nav, and a content area with containers that correspond to each header list item. Currently, I have Sortable attached to both, allowing me to rearrange the visual order of both the navigation elements, and the content containers. The behaviour I am trying to achieve is such that when I drag a navigation element, the content container moves with it, and when I drop the navigation element in a new position within the list, the content container sticks to its new position in the content area as well. The website I am working on is an intranet page, so I cannot provide a link, but I have included a diagram below:

Navigation:
NavOne...NavTwo...NavThree
Content:
ContentOne...ContentTwo...ContentThree

After dragging NavThree between NavOne and NavTwo, the whole arrangement should look like this:

Navigation:
NavOne...NavThree...NavTwo
Content:
ContentOne...ContentThree...ContentTwo

Is there a simple way to link the two Sortables so they behave in this fashion?

On a related note, I would also like to have the rearranged states remain persistent between sessions. Does the Sortable plugin provide a method I could use to store and recall this information (either by cookies, or by using AJAX to save the state to the user account in the database on the back-end).

I've only been using jQueryUI for a day, and I'm already very impressed. I used to abhor the idea of relying on a framework for anything, but this has saved me so much time on this project already.

EDIT:
I feel I must clarify one thing: I don't want to use the navigation items as "handles" to drag the content items. I want to also be able to drag the content item and have the navigation respond accordingly, completely reciprocal between the navigation and the content.

EDIT 2:
I can't think of how to do this without maybe modifying the Sortable plugin. I tried making the navigation items the handles for the corresponding content items and the same the other way, but that didn't work. I tried figuring out how to get the Sortable "update" event on the navigation items to cause the corresponding content item to move, but I can't see how to trigger a sort action programmatically. How do I do this?

Replies(2)

adriantp

Re: jQueryUI Sortable Items -- Make Two Sortables Move Simultaneously

1 year ago

Ok, so I've been working on this for quite some time now and I have yet to achieve the desired results.

I found this somewhat helpful little thread: http://forum.jquery.com/topic/trigger-sortable-update-function

Unfortunately it doesn't really answer my question. It pointed me in what I feel is the right direction, but I haven't arrived at my desired result yet.

This is what I've got so far, but it doesn't work the way I expect it to (it does nothing at all and throws no errors):

/* 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;
}

<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>

/* 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");
});

I've politely waited without complaint for almost a week for some kind of acknowledgement or reply but received none. Does anyone have the ability to help me here, or should I be asking somewhere else?

EDIT1:

Just to prove that I'm doing my research, I've found several interesting and possibly helpful Stackoverflow threads related to my needs, but despite trying various assortments of what I've read and what I have, I still have not arrived at a workable solution. Here are links to the threads I've looked at:

http://stackoverflow.com/questions/3104961/dragging-multiple-list-items-simultaneously
(It's close to what I'm looking for, but not quite. I am not looking to drag from one list to another.)

http://stackoverflow.com/questions/3257925/jquery-draggable-sortable-how-to-tell-if-item-was-actually-added-to-my-sortab
(The receive event only works for two linked sortables. I'm not looking to link sortables in the usual way of drag and drop between them, so I can't use it -- unless the receive event fires regardless of the origin of the draggable, but the stop event and sortupdate event should work just as well for my use case.)

http://stackoverflow.com/questions/1094156/sorting-multiple-items-at-the-same-time-using-jquery-ui
(Not quite what I'm trying to achieve. I'm not looking to drag more than one element at a time, but who knows, I may be asked to add that functionality soon.)

http://stackoverflow.com/questions/1718851/jquery-ui-sortable-multi-item-select
(Similar to previous.)

http://stackoverflow.com/questions/1997454/is-it-possible-to-link-two-jquery-ui-draggables-together
(I might give this idea a chance, but I'm not sure how to tell the other sortable that I want it to put the dragged item in between the two onto which I would be dropping it.)

It's worth noting that I not only want to have the sorting reciprocated between sortables, but I also want to still be able to take advantage of the serialize functionality so I can save their positions to a database for later use.

william.s..

Re: jQueryUI Sortable Items -- Make Two Sortables Move Simultaneously

3 months ago

Did you ever find an answer to this? It's exactly what I'm trying to do as well - both the sorting and the saving to db.

Top Reply

Response title

Attachments

jQuery Forum

jQueryUI Sortable Items -- Make Two Sortables Move Simultaneously

Replies(2)

Re: jQueryUI Sortable Items -- Make Two Sortables Move Simultaneously

Re: jQueryUI Sortable Items -- Make Two Sortables Move Simultaneously

Statistics

Tags

Actions

Related Posts