Possible to not allow jQuery sortable moving item within the same list, but ok with other list?

I have two connected sortable lists: list_b and list_a. What I am trying to accomplish is to allow visible placeholders only in list_b. list_a is only used to pull from so I don't want placeholders when dragged within list_a (at least visible ones that take space), but I want list_b to show placeholders when they are dragged from list_a.

Basically:

• list_a item to list_b = show placeholder in list_b

• list_b item to list_b = show placeholder in list_b

• list_a item to list_a = do not show placeholder, or use a placeholder that is styled display:none; in list_a

• list_b item to list_a = do not show placeholder, or use a placeholder that is styled display:none; in list_a

jQuery:

$( "#list_a, #list_b" ).sortable({
connectWith: ".connected_sortable",
start: function (e, ui) {
  //Closest I can get but now both lists don't show placeholders.
  if(ui.item.context.parentNode.id != 'destination_list')
    ui.placeholder.hide();
},
}).disableSelection();

HTML:

<ul id="list_a" class="connected_sortable">
  <li value="0">test text</li>
  <li value="1">test text</li>
</ul>

<ul id="list_b" class="connected_sortable">
  <li value="2">test text</li>
</ul>

Is there a way to do this outside of combining the jQuery draggable plugin with the sortable plugin? I do not want to go that route because I've encountered some jQuery bugs when using both开发者_运维知识库 plugins together.

js Fiddle example for my answer

You can make list_a connect to list_b but not connect list_b to list_a. That way dragging list_b items to list_a wont be possible. example:

$( "#list_a" ).sortable({
    connectWith: "#list_b"
});
$( "#list_b" ).sortable({
    placeholder: "placeholder"
});

$( "#list_a, #list_b" ).disableSelection();

But if you just want to hide placeholder then you could do this with css:

#list_a .placeholder {display:none}