动态使用 droppable 函数 - jQuery UI答案

【问题标题】：Dynamically use the droppable function - jQuery UI动态使用 droppable 函数 - jQuery UI
【发布时间】：2015-09-24 15:40:06
【问题描述】：

我正在尝试创建元素的拖放。我在主要部分有一段 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 绑定到可放置事件？

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

【问题讨论】：

嗯不确定您要做什么，但我认为您必须回忆一下新 dropContent 上的 .droppable() 绑定。此外，您不应该创建具有相同 ID（“div2”）的 div。它们应该是独一无二的。
是的，我正在尝试找出如何将新的 div 重新绑定到我的 droppable 事件。当然，我不会多次使用 divs ID，这只是一个（不好的）示例 :) 工作后我动态创建它
你需要在它生成后将其声明为可丢弃..
我明白了，但是怎么做？我尝试使用以下 $('.ab-builder-el').droppable();

标签： javascript php jquery html jquery-ui

【解决方案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'));

【讨论】：

感谢您的帮助，您为我指明了正确的方向：D

【解决方案2】：

我误解了 droppable 的工作原理。

在这部分：“$('.el-empty').droppable({”我初始化了droppable。我唯一要做的就是创建一个在放置后调用的函数：

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({}) 之间调用函数以首次初始化可放置事件。剩下的在滴完后完成。

我想这是漫长的一天:)

【讨论】：