javascript - 动态使用 droppable 函数 - jQuery UI

Question

我正在尝试创建元素的拖放。我在主要部分有一段 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 没有连接到 droppable 事件。

如何将新的 div 绑定(bind)到 droppable 事件？

结果有点像这样:http://jsfiddle.net/abayob/mws94soj/12/

Answer 1

将代码分解为函数:

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'));