javascript - 拖动到可排序的元素没有响应

Question

我正在尝试将元素从 block 元素的 div 拖动到可排序的 div。要在 #block div 内拖动元素，没有句柄，但在 #sortable div 内有一个用于拖动元素的句柄，单击元素时会显示该句柄。问题是，从 #block div 拖动的元素在从 #block div 拖动到 #sortable div 时确实有响应，它确实不显示.drag_handle。

js:

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

演示地址:codepen

我错过了什么？我们将非常感谢您的帮助和指导。谢谢。

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