Question

我正在使用jquery拖放。 draggable元素是一个div，有两个嵌套的div左右浮动。在放置时，左嵌套div（包含文本）将为单击事件启用：

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

现在，在零星的情况下，偶尔发生点击事件会触发打开可拖动数据链接中的链接。当可拖动的号码与插槽号码不匹配时，它看起来会触发，但不是100％。

请参阅http://jsfiddle.net/f2bbt/

小提琴

很奇怪......您可能需要尝试几次才能发生这种情况，将元素拖到插槽的边缘，以便插槽突出显示。 'Extract RNA'正下方的拖动似乎比其他人更多......并且当它发生时，加载了错误的页面...应该是element_8.html，但它会打开element_1.html的新页面（其中属于孤立病毒元素）。

Answer 1

看起来你想要做的是将点击处理程序添加到被删除的元素，而不是将点击处理程序添加到具有类element_left的所有元素

您需要将其更改为

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

演示：Fiddle

Answer 2

您的脚本可以缩小到这一点，不需要对每个元素和插槽重复相同的功能，您可以使用each()代替。也没有必要更改每个元素的id，你可以在css中使用相同的id：

$(init);

function init() {
    $('.element').css('cursor', 'move');
    $('.element').each(function () {
        $(this).data('number', $(this).attr('id').replace('element_', '')).draggable({
            containment: '#content',
            stack: '#elements div',
            cursor: 'hand',
            revert: true
        });
    });

    // Create the element slots

    $('#slots').find('div').each(function () {
        $(this).data('number', $(this).attr('id').replace('slot_', '')).droppable({
            accept: '#elements div',
            hoverClass: 'hovered',
            drop: handleElementDrop
        });
    });
}

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

    if (slotNumber == elementNumber) {
        $(this).droppable('disable');
        ui.draggable.parent().find('.info').addClass('correct');
        ui.draggable.css('cursor', 'pointer')
            .addClass('correct')
            .draggable('disable')
            .position({
            of: $(this),
            my: 'left top',
            at: 'left top'
        })
            .on('click', function () {
            window.open(ui.draggable.attr('data-link'));
        });
        ui.draggable.draggable('option', 'revert', false);
    }
}

在handleElementDrop函数中你添加了点击事件处理程序，当用户将正确的元素放在右边的插槽上然后点击它时，它将触发。

jsfiddle

Jquery拖放 - 在drop上单击事件寄存器

2 个答案: