被拖拽到排序元素不響應

Question

我試圖從一個塊元素的div元素拖動到可排序的div。要拖動#block div內的元素，沒有手柄，但在#sortable div內有一個用於拖動元素的句柄，單擊該元素時會顯示該元素。問題是，從#block div拖出的元素在從#block div拖到#sortable div時確實會響應，但不會顯示.drag_handle。

記者：在codepen

$('#content #sortable .draggable').on("click", function() { 
    draggable = $(this); 
    $('.draggable .drag_handle').hide(); 
    draggable.find('.drag_handle').show(); 
    console.log(draggable); 
    }) 

    $(document).on("click", function(event) { 
    if(!$(event.target).closest('.draggable').length) { 
     draggable.find('.drag_handle').hide(); 
    } 
    }) 

    $('#content #sortable').sortable({ 
    handle: '.drag_handle' 
    }); 

    $('#blocks .draggable').draggable({ 
    helper: "clone", 
    revert: "invalid", 
    connectToSortable: '#content #sortable' 
    }); 

演示我缺少什麼？我們將非常感謝您的幫助和指導。謝謝。

Answer 1

您錯過了拖動元素到#sortable的部分是新的DOM元素，並且沒有附加任何點擊事件。因此，這裏最簡單的方法就是要改變這種

$('#content #sortable .draggable').on("click", function() { 
draggable = $(this); 
$('.draggable .drag_handle').hide(); 
draggable.find('.drag_handle').show(); 
console.log(draggable); 
}) 

這個

$(document).on("click",'#content #sortable .draggable',function() { 
draggable = $(this); 
$('.draggable .drag_handle').hide(); 
draggable.find('.drag_handle').show(); 
console.log(draggable); 
}) 

看到codepen：http://codepen.io/anon/pen/MaprKd