0

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 move from 1 tab to the other. Sometimes nothing happens, and sometimes item disappears from current list (display:none) and nothing else...

I put together jsfiddle to demonstrate what I see.

Maybe I just cannot see the little mistake I made :S

http://jsfiddle.net/46zqm/1/

$(".word-list").sortable({
    tolerance: 'pointer',
    cursor: 'move',
    forcePlaceholderSize: true,
    dropOnEmpty: true,
    connectWith: 'ol.word-list',
    placeholder: "ui-state-highlight"
}).disableSelection();

// Words tabs
var $tabs = $("#tabs").tabs();

// Make tab names dropable
var $tab_items = $("#tabs-nav li", $tabs).droppable({
    accept: ".word-list li",
    hoverClass: "ui-state-hover",
    tolerance: 'pointer',
    drop: function (event, ui) {
        var $item = $(this);
        var $list = $($item.find("a").attr("href")).find(".word-list");

        ui.draggable.hide("fast", function () {
            $tabs.tabs("option", "active", $tab_items.index($item));
            $(this).appendTo($list).show("slow");
        });
    }
});

Adding tolerance:pointer fixed inconsistency on drab and drop area. But general problem remains.

Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107

2 Answers2

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.

AfromanJ
  • 3,922
  • 3
  • 17
  • 33
  • I cannot believe I wasted 1 hour on this :| I hate extra markup! –  Oct 28 '13 at 14:47
  • p.s. just div thing helped. No need to change ol to ul. I use ol because it is numbered list. –  Oct 28 '13 at 14:47
  • Great, I'm glad this solved your problem! Mark me as the answer if your happy. Thanks. – AfromanJ Oct 28 '13 at 14:48
  • I actually understood why my code wasn't working. It was jquery error on my part not markup issue. But since you led me to the discovery I will accept your answer. I'm also writing my own solution. –  Oct 28 '13 at 14:56
  • I realize this is old, but I don't get the `ol` usage at the sample (JsFiddle). How does that help, and how does it even work? – Hari Lubovac May 18 '16 at 23:03
1

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!