Jquery拖放 - 單擊事件寄存器下降

Question

我正在使用jQuery的拖放。可拖動元素是一個帶有兩個嵌套div的div，左右浮動。在降，左div嵌套（包含文本），獲取點擊事件啓用：

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

現在在下降，零星，click事件觸發關閉打開的數據鏈接的鏈接拖動。它看起來像是在可拖動數字與插槽號碼不匹配時觸發，但不是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，你可以只使用相同的ID在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); 
    } 
} 

在handleElementDrop功能，您CAD添加單擊事件處理程序，當用戶把正確的元素右側插槽然後將火點擊它。

jsfiddle