Exclude one or more elements from being connected (using connectWith) in jQuery's sortable lists
- by Lev
I have two lists, one with an ID of "vlist" and one with an ID of "hlist". The "vlist" holds elements which should be visible, while the "hlist" holds items that should remain hidden. The idea here is to allow the administrator of the system to specify which elements/fields should be shown on a sign-up page, and which shouldn't. The two lists are connected using "connectWith", so the administrator can drag items from the visible list to the hidden list (or vice versa).
My dilemma is that there are a few fields I want locked into the visible list, but still sortable within that one list. For example, the "username", "email" and "password" fields should be locked within the visible list (as they always need to be used for registration).
Is this even possible? Perhaps it is a no-brainer that I simply haven't discovered yet. I've looked around through jQuery's documentation for a while and can't seem to find anything related to this scenario. I have found how you can "cancel" specific elements in the list from being sortable altogether or even disabled from being a dropable target, but this doesn't do it. The user should still have the ability to drag these items within the "visible" list, in case they want to adjust the ordering of the locked fields. I'm also aware that you can contain sortable elements within a specific element or DOM object, but this also can't be used as this only seems to apply to the whole sortable list, and not specific elements of that list.
I've even tried to see if something like this would work after I built the sortable listing(s):
$('#vlist > #slist-li-username').sortable('option', 'containment', '#vlist');
Obviously, that didn't work either or I wouldn't be posting this.
In case it might help, I thought I'd throw in the code I'm using now; here is the jQuery code:
$(function()
{
$('#vlist, #hlist').sortable
({
connectWith: '.signup-set_flist',
forcePlaceholderSize: true,
receive: function (event, ui)
{
var itemID = ui.item.attr('id');
var fID = itemID.replace(/slist-li-/g, '');
var hID = 'slist-' + fID;
if (ui.sender.attr('id') == 'vlist')
{
$('#'+hID).val('');
}
else
{
$('#'+hID).val(fID);
}
}
}).disableSelection();
$('#vlist > #slist-li-username').sortable('option', 'containment', '#vlist');
});
And as for the HTML, I'll upload it to here (since StackOverflow seems to break when I paste it in here - even in code mode):
http://sikosoft.net/jquery-sort-connect.html
Any help would greatly be appreciated! :) Oh, and be gentle as this is my first question here. ;)
