3

我正在使用 jquery 拖放。可拖动元素是一个具有左右浮动的两个嵌套 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 打开一个新页面（其中属于隔离病毒元素）。

4

2 回答 2

1

您的脚本可以精简到此，无需对每个元素和插槽重复相同的功能，您可以使用它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功能中，您 cad 添加了单击事件处理程序，当用户将正确的元素放在正确的插槽上然后单击它时，该处理程序将触发。

jsfiddle

于 2013-05-08T04:29:48.433 回答
1

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

您需要将其更改为

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

演示：小提琴

于 2013-05-08T03:31:25.890 回答