Jquery drag and drop - click event registers on drop

问题

I'm using jquery drag and drop. The draggable element is a div with two nested divs floated left and right. On drop, the left nested div (which contains the text), gets enabled for a click event:

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

Now on drop, sporadically, the click event fires off opening the link in the data-link for the draggable. It looks like it fires off when the draggable number doesn't match the slot number, but not 100% on this.

See fiddle at http://jsfiddle.net/f2bbt/

Weird... You may need to try a few times to get this happening, drag the element to the edge of the slot so that the slot highlights. The draggable immediately below the 'Extract RNA' seems to do this more than others...and when it happens the wrong page is loaded...should be element_8.html, but instead it opens a new page for element_1.html (which belongs to Isolate Virus element).

回答1:

It looks like what you want to do is to add the click handler to the element which was dropped, instead of that you were adding the click handler to all elements with class element_left

You need to change it to

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

Demo: Fiddle

回答2:

Your script can be slimmed down to just this, there's no need to repeat the same function to every element and slot, you can use each() instead. also there's no need to change id of each element you can just use the same id in css:

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

in handleElementDrop function you cad add click event handler which will fire when user put the right element on the right slot then click on it.

jsfiddle

来源：https://stackoverflow.com/questions/16432170/jquery-drag-and-drop-click-event-registers-on-drop