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

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

$('.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元素）。

Answer 1

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

您需要将其更改为

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

演示： 小提琴

Answer 2

您的脚本可以缩小到这一点，不需要对每个元素和插槽重复相同的function，您可以使用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函数中，你添加了click事件处理程序，当用户将正确的元素放在右边的插槽上然后单击它时将触发。

的jsfiddle