我使用desandro draggabilly并且在插入新元素时遇到问题。似乎事件没有触发添加的新元素。
这里是jsfiddle。
这里也是代码。
HTML
<div class="box draggable">1</div>
CSS
.box {
width: 200px;
height: 200px;
border: 1px solid red;
display: block;
}
JQUERY
$(document).ready(function () {
$.bridget('draggabilly', Draggabilly);
var $draggable = $('.draggable').draggabilly({
axis: 'x'
});
$draggable.on('dragEnd', function(e, p) {
$(this).parent().prepend('<div class="box draggable">2</div>');
$(this).prev().addClass('draggable')
$(this).remove();
});
});
在下面的代码中,当我拖动div 1时,在dragEnd
上它将插入具有draggable
类的div 2然后删除div 1.这里的问题是div 2不可拖动即使它有一类draggable
。
答案 0 :(得分:2)
您需要在prepending
之后重新初始化它,因为它会动态添加到DOM,并且event draggabilly
不会附加到它。以下将解决问题:
$draggable.on('dragEnd', function(e, p) {
$(this).parent().prepend('<div class="box draggable">2</div>');
$('.draggable').draggabilly({
axis: 'x'
}); //re-initialize again
$(this).remove();
});
<强> DEMO 强>
<强>更新强>
现在,如果您要将dragend
事件调用到您添加的元素并继续增加dragend
上的数字,只需保留一个全局变量i
并按每次增量进行增加,如下所示:
var i=1; //global variable
$(document).ready(function () {
$.bridget('draggabilly', Draggabilly);
$('.draggable').draggabilly({
axis: 'x'
});
$(document).on('dragEnd','.draggable', function(e, p) {
i++; //increment it
$(this).parent().prepend('<div class="box draggable">'+i+'</div>');
//display text as i
$('.draggable').draggabilly({
axis: 'x'
});
$(this).remove();//remove previous one
});
});
<强> Updated demo 强>
答案 1 :(得分:1)
每次创建div和bind事件时都必须初始化 如下所示 -
$(document).ready(function () {
$.bridget('draggabilly', Draggabilly);
var $draggable = $('.draggable').draggabilly({
axis: 'x'
});
$draggable.on('dragEnd', callback);
});
var co=2;
function callback(e, p) {
$(this).parent().prepend('<div class="box draggable">'+co++ +'</div>');
$(this).prev().addClass('draggable')
$(this).remove();
$(".draggable").draggabilly({
axis: 'x'
});
$(".draggable").on('dragEnd', callback);
}