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
