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

原文 标签 javascript php jquery html jquery-ui

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

结果有点像这样: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'));

关于javascript - 动态使用 droppable 函数 - jQuery UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32765526/

相关文章:

php - 对HTML和PHP/MySQL进行故障排除

php - 采埃孚 : How to add default prefix path to form elements so I don't have to set it everytime?

php - PDO Mysql 没有正确返回结果

javascript - 将active_section类添加到菜单的部分

javascript - Angular4 - 如何从文档正文中删除由 Bootstrap 注入(inject)的类?

javascript - 如何使用Jscript更改<p>的文本?

javascript - Facebook 的 Like Button 如何跨域访问将 HTML 添加到父窗口?

javascript - Bootstrap视差工具提示和平滑滚动

javascript - 为什么将数据传递给 AJAX 请求 'success' 函数?

javascript - ES6 箭头函数和这个上下文