CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
IlludiumPu36
IlludiumPu36

Reputation: 4304

Jquery drag and drop - set clickable region in draggable on drop

This is a follow up question posted at Jquery drag and drop - click event registers on drop

I'm using jquery drag and drop. The draggable elements contain two nested divs floated left and right. The left div contains the text on the draggable and the right div contains a small 'info' button that toggles a tooltip.

On drop, I want the left nested div containing the text of the draggable to be clickable. The drop is handled by the following function:

function handleElementDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var elementNumber = ui.draggable.data( 'number' );

  if ( slotNumber == elementNumber ) {



ui.draggable.css( 'cursor', 'pointer' );
ui.draggable.parent().find('.element_left').click(function(e) {  
        window.open(ui.draggable.attr('data-link'));
    });

ui.draggable.parent().find('.info').addClass('correct');
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
  } 
}

Now where there is:

ui.draggable.parent().find('.element_left').click(function(e) {  
        window.open(ui.draggable.attr('data-link'));
    });

Works for the clickable left nested div OK, but the issue that I posted in my last question appears to remain. That is, on drop, the click event is fired. This happens very sporadically...I have a fiddle at http://jsfiddle.net/5wcaQ/

Upvotes: 1

Views: 1158

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388436

i is not .element_left element it is a info element inside it.

Also the behaviour could be related the fact that we are registering a click event handler inside another click event handler. Try putting the event registration to a setTimout and see whether it is getting fixed

setTimeout(function(){
    ui.draggable.find('.element_left').click(function(e) { 
        window.open(ui.draggable.attr('data-link')); 
    });
});

Demo: Fiddle

Upvotes: 1

Related Questions