Friday, June 25, 2010

First jQuery Experience

I've been following the jQuery project for a while now and have been impressed by it's simplicity. I hadn't actually used jQuery until this last week. So far it's been incredibly powerful, except for several small issues.

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