Sortable lists with tabs not posting for receiving list
I'm looking to use Sortable with tabs. I have things setup to the point where they sort between tabs, however when I drag something from one tab to the other, the function that posts the results only runs for the sending list, not the receiving.
Can someone advise what I am missing to handle this? I have a feeling I need to add something after the .appendTo section, but I'm not sure what that would be.
Below is my code:
- <style>
- #sortable1 li, #sortable2 li, #sortable3 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
- .ui-tabs {
- padding:2px;
- }
- </style>
- <script>
- $(function () {
- $('#sortable1, #sortable2, #sortable3').sortable({
- placeholder: 'SortHighlight',
- connectWith: '.connectedSortable',
- receive: function (i) {
- placeholder: 'SortHighlight'
- PostSortable($(this).attr('qid'), $(this).attr('rid'), $(this).attr('QOrder'), $(this).attr('id'));
- },
- stop: function (i) {
- placeholder: 'SortHighlight'
- PostSortable($(this).attr('qid'), $(this).attr('rid'), $(this).attr('QOrder'), $(this).attr('id'));
- }
- }).disableSelection();
- var $tabs = $("#tabs").tabs();
- var $tab_items = $("ul:first li", $tabs).droppable({
- accept: ".connectedSortable li",
- hoverClass: "ui-state-hover",
- drop: function (event, ui) {
- var $item = $(this);
- var $list = $($item.find("a").attr("href"))
- .find(".connectedSortable");
- ui.draggable.hide("slow", function () {
- $tabs.tabs("option", "active", $tab_items.index($item));
- $(this).appendTo($list).show("slow");
- });
- }
- });
- function PostSortable(queueID, repID, QueueOrder, SortID) {
- var order = $("#" + SortID).sortable("toArray");
- $.ajax({
- url: "PostPage.asmx/OrderFunction",
- dataType: "json",
- type: "POST",
- data: "{ 'OrderIds': '" + order + "', 'QueueID': '" + queueID + "', 'RepID': '" + repID + "', 'QueueOrder': '" + QueueOrder + "' }",
- contentType: "application/json; charset=utf-8"
- });
- }
- });
- </script>
- <div id="tabs">
- <ul>
- <li><a href="#tabs-1" class="ui-state-default">Phone System</a></li>
- <li><a href="#tabs-2" class="ui-state-highlight">Web Development</a></li>
- </ul>
- <div id="tabs-1">
- <ul id="sortable1" class="connectedSortable ui-helper-reset" QOrder="1" qid="218" rid="123">
- <li class="ui-state-default" id="List_1">Item 1</li>
- <li class="ui-state-default" id="List_2">Item 2</li>
- <li class="ui-state-default" id="List_3">Item 3</li>
- <li class="ui-state-default" id="List_4">Item 4</li>
- <li class="ui-state-default" id="List_5">Item 5</li>
- </ul>
- </div>
- <div id="tabs-2">
- <table>
- <tr>
- <td style="vertical-align:top;">
- <strong>Assigned to User</strong>
- <ul id="sortable2" class="connectedSortable ui-helper-reset" QOrder="2" qid="310" rid="1">
- <li class="ui-state-highlight" id="List_21">Item 1</li>
- <li class="ui-state-highlight" id="List_22">Item 2</li>
- <li class="ui-state-highlight" id="List_23">Item 3</li>
- <li class="ui-state-highlight" id="List_24">Item 4</li>
- <li class="ui-state-highlight" id="List_25">Item 5</li>
- </ul>
- </td>
- <td style="vertical-align:top;">
- <strong>Unassigned</strong>
- <ul id="sortable3" class="connectedSortable ui-helper-reset" QOrder="3" qid="210" rid="0">
- <li class="ui-state-highlight" id="List_31">Item 1</li>
- <li class="ui-state-highlight" id="List_32">Item 2</li>
- <li class="ui-state-highlight" id="List_33">Item 3</li>
- <li class="ui-state-highlight" id="List_34">Item 4</li>
- <li class="ui-state-highlight" id="List_35">Item 5</li>
- </ul>
- </td>
- </tr>
- </table>
- </div>
- </div>
I appreciate the assistance.