The first issue came up when I was trying to implement drag and drop functionality. The first example from the jQuery website kept failing miserably. After a while I found solace in the sortable option once I discovered that it could be linked to other elements to implement the d&d functionality I needed.
After a while though I discovered some unwanted side effects do the sortable object. It seems that the sortable applies to any of it's child elements, this included the desired sortable divs, and the not so desired span, and anchor tags I was using for titles and other formatting.
I looked all over, google, irc, jQuery docs... No one seemed to be experiencing my exact problem. I was just about to create some special containers just for sorting when I found a semi-related post mentioning the .hover method.
What I had been trying was to disable the sort on specific elements by applying the sortable('disable') method to them... however, this didn't work because the child elements don't have the sortable attributes themselves ): Instead what I needed to do was disable all sortables when the mouse hovered over the targeted elements.
The code:
$(".sortables").sortable({
connectWith: '.sortables',
placeholder: 'ui-state-highlight',
distance: 5,
opacity: .5,
});
//disable and re-enable sortable on hover(in, out)
$('.noSortable').hover( function(event,ui){
$('.sortables').sortable('disable');
},
function(event,ui){
$('.sortables').sortable('enable');
});
No comments:
Post a Comment