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

我与影子孤独终老i 提交于 2020-01-16 02:33:32

问题


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/


回答1:


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



来源:https://stackoverflow.com/questions/16432605/jquery-drag-and-drop-set-clickable-region-in-draggable-on-drop

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!