I am trying to move tabs from one unordered list (set of tabs) to another, correct.
On Oct 16, 1:30 am, Klaus Hartl <[EMAIL PROTECTED]> wrote: > On 15 Okt., 16:35, scottnath <[EMAIL PROTECTED]> wrote: > > > > > I am trying to create draggable/droppable tabs. I've got it partly > > built, but I'd love some community input on this. > > > A working model can be seen here: > > >http://scottnath.com/tabs/draggable_tabs.html > > > Below I will paste the jquery code I'm using. First, here are some > > issues I'm running into that I really need some help with: > > > 1) tabs can only be moved once > > 2) moving tabs from left-to-right works, but not vice/versa > > 3) I'm having trouble figuring out the dragged tabs original index > > > jQuery code: > > > $(document).ready(function(){ > > bindBehavior();}); > > > function bindBehavior(){ > > $("#left_left > ul").tabs(); > > $("#left_right > ul").tabs(); > > $(".draggableItem").Draggable({ > > revert: true > > }); > > $(".tabsList").Droppable({ > > accept: "draggableItem", > > ondrop: function (drag){ > > var thisId = $(this).attr("id"); > > // gets the id of the container that the > > draggable's tab content > > should end up in > > var thisParent = $(this).parent().attr("id"); > > // gets the moved tab id by using the href > > var dragAHref = $(drag).children("a").attr("href"); > > // remove the leading # sign > > var dragTabId = dragAHref.substring(1); > > // gets the clickable-tab content > > var dragAContent = $(drag).children("a").text(); > > // gets the id of the container that the > > draggable's tab content > > resides in > > var dragParent = > > $("#"+dragTabId).parent().attr("id"); > > // if it didn't move to a new spot, do nothing > > if(dragParent == thisParent){ > > return; > > } > > // finds the htmlobject that is the dragged LI's > > corresponding tab > > var dragTab = $("#"+dragTabId).get(0); > > // gets tab LI index > > var dragIndex = $("li.draggableItem").index(drag); > > // next: put content of tab into newly created tab > > var movedTabContent = $("#"+dragTabId).html(); > > // for some reason, the index seems to come out one > > too many > > dragIndex--; > > // remove the tab from where it came from > > $("#"+dragParent+ " ul").tabsRemove(dragIndex); > > // add this tab to where it was dragged > > $("#"+thisId).tabsAdd('#'+dragTabId, dragAContent); > > // need to add this class > > $("#"+dragTabId).addClass('tabContent'); > > // populate the tab-div > > $("#"+dragTabId).html(movedTabContent); > > > bindBehavior(); > > } > > }); > > > } > > > Thank you to anyone who can help. I really appreciate it. > > > Scott Nath > > Are you trying to move tabs from one set to another or inside its set > only? > > --Klaus
