Jquery拖放 - 在可拖动的拖放中设置可点击区域

时间:2013-05-08 04:22:05

标签: jquery jquery-ui jquery-ui-draggable

这是Jquery drag and drop - click event registers on drop

发布的跟进问题

我正在使用jquery拖放。可拖动元素包含两个左右浮动的嵌套div。左侧div包含draggable上的文本,右侧div包含一个小的“info”按钮,用于切换工具提示。

在drop中,我希望包含draggable文本的左嵌套div可以被点击。下拉由以下函数处理:

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 );
  } 
}

现在有:

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

适用于可点击的左嵌套div好,但我在上一个问题中发布的问题似乎仍然存在。也就是说,在drop,click事件被触发。这种情况非常偶然发生......我在http://jsfiddle.net/5wcaQ/

有一个小提琴

1 个答案:

答案 0 :(得分:1)

i不是.element_left元素,它是info元素。

此外,行为可能与我们在另一个单击事件处理程序中注册click事件处理程序这一事实有关。尝试将事件注册放到setTimout并查看是否已修复

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

演示:Fiddle