拖动到可排序的元素没有响应答案

【问题标题】：Element dragged to sortable does not respond拖动到可排序的元素没有响应
【发布时间】：2015-10-03 11:35:54
【问题描述】：

我正在尝试将元素从块元素的 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 上的演示

我错过了什么？您的帮助和指导将不胜感激。谢谢。

【问题讨论】：

标签： javascript jquery jquery-ui dom

【解决方案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

【讨论】：