I am using draggable with the following options:
$("#accountDetailPanel .draggable").draggable({
helper: 'clone',
appendTo: 'body',
cursor: 'move',
revert: 'invalid'
});
$(".accountPod").droppable({ accept: '.draggable' });
I'm applying draggable to the content of the 2nd tab of a jquery UI tab upon loa开发者_C百科d:
The issue is only the first drag works fine. When I don't drop the draggable into an acceptable droppable, the pod reverts back but I can't do another drag. No matter what, the dragged pod loses its draggableness.
In attempting to apply a stop function to the draggable init put me on a path to needing to nest infinite .draggable calls.
The full script:
$(document).ready(function(){
$("#tabs").tabs();
/**
* Click on account pod -> account detail pane is populated
* Inside account detail, tabs pulled dynamically
* Installation List - each installation (home) is movable
*/
$(".accountPod").live("click", function(event){
var account_id = $(this).attr("id").replace("acct_", "");
// load user's details into tab panel (replace all tabs)
$("#accountDetailPanel").load("/accountDetail/" + account_id, function(){
// post-load of tabs html
$("#tabs").tabs();
// init draggables
$("#accountDetailPanel .draggable").draggable({
helper: 'clone',
appendTo: 'body',
cursor: 'move',
revert: 'invalid'
});
$(".accountPod").droppable({ accept: '.draggable' });
});
});
});
Since this fiddle works: http://jsfiddle.net/notbrain/DycY6/41/ I'm definitely thinking it's related to the dynamic application of .draggable() when the tabs are loaded.
Any pointers are greatly appreciated!
I think the issue is unfortunately that of the libraries being loaded. I found that using jQuery 1.8.5 and jQuery-git.js worked.
精彩评论