我正在尝试创建元素的拖放。我在主部分有一段html:
<div class="dashboard_container ui-droppable">
<div class="ab-builder-el el-empty ui-droppable" ordering="-0.5">
<p>Plaats hier je element</p>
</div>
</div>
要在id=div(number)的div之间添加一段html(由php的一些变量生成)，我有以下JavaScript:
//Draggable part
$('.ab-nav-element').draggable({
appendTo: '.scroll-container',
revert: 'invalid',
cursor: "move",
distance: 50,
revertDuration: 250,
helper: 'clone',
start: function(){
$('.el-empty').addClass('el-receptive');
elementName = 'standard_columns';//$(this).attr('')
},
stop: function(){
$('.el-receptive').removeClass('el-receptive');
}
});
//Droppable part
var dropContent = '<div id="div2" ordering="0"></div><div class="ab-builder-el el-empty ui-droppable" ordering="0.5"><p>Plaats hier je element</p></div>';
$('.el-empty').droppable({
hoverClass : 'ui-hover',
drop: function() {
$('.el-empty').after(dropContent);
$('#div2').load("builder-loader.php",
{
elementname: elementName,
}
);
}});
可以看到，我使用AJAX调用来更新div的内容。因为我在后面添加了内容，所以我的新div的父元素没有连接到可拉事件。
我如何能够绑定新的div's到可拉事件?
结果大致如下:http://jsfiddle.net/abayob/mws94soj/12/
把你的代码分成几个函数:
var make_droppable = function($elements) {
$elements.droppable({
hoverClass : 'ui-hover',
drop: drop_function
});
}
var drop_function = function() {
var dropContent = '<div id="div2" ordering="0"></div><div class="ab- builder-el el-empty ui-droppable" ordering="0.5"><p>Plaats hier je element</p></div>';
$('.el-empty').after(dropContent);
$('#div2').load("builder-loader.php",
{
elementname: elementName,
}
);
// rebind new elements
make_droppable($('.el-empty'));
}
// call this for the first time.
make_droppable($('.el-empty'));
我误解了dropable的工作原理。
在这部分:"$('.el-empty')。我初始化了这个可掉落对象。我唯一需要做的就是创建一个函数，在删除后调用:
function dropreload () {$('.ab-builder-el').droppable({
hoverClass : 'ui-hover',
drop: function() {
$('.el-empty').after(dropContent);
var divId = 2;
$('#div2').load("builder-loader.php",
{
elementname: elementName,
divId:divId
}
);
dropreload();
}})};
第一次调用$(document).ready({})之间的函数初始化可丢弃事件。剩下的在滴完之后。
我猜这是漫长的一天:)