Question

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

拖动到可排序的元素不响应

1 个答案: