Struggling with jquery ui sortable and tabs (would like to move items around tabs)

Question

Documentation on this subject was quite clear: http://jqueryui.com/sortable/#connect-lists-through-tabs

I tried to do the same in my project, but I cannot get element to

Answer 1

I have copied the recommending HTML from the JQuery Sortable documentation. Try the below HTML.

I wrapped all tabs in a DIV with the id 'tabs' and all your 'word-list' classes are now wrapped in DIV's with different tab ID's. I also changed all <ol> elements to <ul>.

<section class="userview-right" id="tabs">
<h1>Words</h1>
<div id="tabs">   
    <ul id="tabs-nav">
        <li><a href="#tabs-1">list 1</a></li>
        <li><a href="#tabs-2">list 2</a></li>
        <li><a href="#tabs-3">Deleted</a></li>
    </ul>

    <div id="tabs-1">
        <ul class="word-list">
            <li class="ui-state-default">
                list 1
            </li>
        </ul>
    </div>
    <div id="tabs-2">
        <ul class="word-list">
            <li class="ui-state-default">
                list 2
            </li>
        </ul>
    </div>
    <div id="tabs-3">
        <ul class="word-list">
            <li class="ui-state-default">
                deleted
            </li>
        </ul>
    </div>
</div>
</section>

Here is the JsFiddle.

Answer 2

Jamie's answer led me to my own solution:

var $list = $($item.find("a").attr("href"));

instead of:

var $list = $($item.find("a").attr("href")).find(".word-list");

Without changing markup!