[jQuery] draggable and droppable tabs

[jQuery] draggable and droppable tabs


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
ps: sorry if this is a repost, but my original is not longer found
when I search for it.







































































    • Topic Participants

    • scott