3

私はjqueryのドラッグアンドドロップを使用しています。ドラッグ可能な要素は、左右にフロートされた 2 つのネストされた 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 の新しいページが開きます (これはIsolate Virus エレメントに属します)。

4

2 に答える 2

1

あなたがしたいことは、クラスを持つすべての要素にクリックハンドラーを追加する代わりに、ドロップされた要素にクリックハンドラーを追加することですelement_left

に変更する必要があります

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

デモ:フィドル

于 2013-05-08T03:31:25.890 に答える
1

スクリプトはこれだけにスリム化できます。すべての要素とスロットに同じ関数を繰り返す必要はありませんeach()。代わりに使用できます。また、css で同じ ID を使用できる各要素の 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

于 2013-05-08T04:29:48.433 に答える