我正在尝试将元素从 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
我错过了什么?我们将非常感谢您的帮助和指导。谢谢。
最佳答案
您错过了拖拽到 #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
关于javascript - 拖动到可排序的元素没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32922077/