Exclude one or more elements from being connected (using connectWith) in jQuery's sortable lists

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 hI开发者_如何学GoD = '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

---

i know this is a very old question .. but i ran into the same problem a couple of hours before.. and couldn't find the answer... after a lot of digging around .. i came up with this.. "didn't know that i had to call the refresh method !!!"

anyway basically all i do here is: if i detect an excluded element at the beginning of the sorting i disable the connection with the other list temporarily and resume it at the end of the sorting process. this will keep the element sortable within their lists.. but not connected to the other list.

hope this helps anyone.

html

<ul class="first_list">
  <li>Element_1</li>
  <li class="excluded">Element_2</li>
  <li class="excluded">Element_3</li>
  <li>Element_4</li>
</ul>

<ul class="second_list">
  <li>Element2_1</li>
  <li>Element2_2</li>
  <li>Element2_3</li>
  <li>Element2_4</li>
</ul>

JS:

var firstList = $(".first_list");
var secondList = $(".second_list");

firstList.sortable({
    connectWith: ".second_list"
    start: function(event, ui) {
        if (ui.item.hasClass("exclude")) {
            firstList.sortable("option", "connectWith", false);
            firstList.sortable("refresh");
        }
    },
    stop: function(event, ui) {
        if (ui.item.hasClass("exclude")) {
            firstList.sortable("option", "connectWith", ".second_list");
            firstList.sortable("refresh");
        }
    });

secondList.sortable({
    connectWith: ".first_list"
});​

---

The specific functionality that you look is hard to construct but maybe this is of any help.

Triggering a cancel event whenever the excluded item is moved to a connected list. Just give the excluded item some special attribute (class).

html

<ul class="sortables">
  <li>Element_1</li>
  <li class="excluded">Element_2</li>
  <li class="excluded">Element_3</li>
  <li>Element_4</li>
</ul>

<ul class="sortables">
  <li>Element2_1</li>
  <li>Element2_2</li>
  <li>Element2_3</li>
  <li>Element2_4</li>
</ul>

js

$(".sortables").sortable({
  connectWith: '.sortables', 
  over: function(){
    if($(ui.item.hasClass('excluded')){
       $(ui.sender).sortable('cancel');
    }
});

---

Maybe this helps you:

http://jqueryui.com/demos/sortable/#items

This is locking elements in the list as you asked before.