Jquery 动态创建的可放置元素不起作用

Question

好吧，大家好，我开发了一个页面来创建拖放表单，但是我在放置内部元素时遇到了问题，例如：

<div class="container">
   <div classs="row"> <! - I drop here -!> </ div>
   <- Content is dropped here! : '(-!>
</ div>

这是我的 Javascript：

        $(document).ready(function(){

                $( "#a .row-element" ).draggable({ 
                    revert: "invalid",
                });

                $(  "#a .span2-element" ).draggable({ 
                    revert: "invalid",
                });

                $(".row").droppable({
                    accept: '.span2-element',
                    activeClass: "ui-state-hover",
                    hoverClass: "ui-state-active",
                    greedy: true,
                    drop: function(event, ui) {
                        $('<div class="span2"></div>"').appendTo(this);
                    },
                    activate: function(event, ui) {
                        $(ui.helper).draggable({ revert: "valid"});
                    }
                });

                $(".container").droppable({
                    accept: '.row-element , .span2-element',
                    activeClass: "ui-state-hover",
                    hoverClass: "ui-state-active",
                    greedy: true,
                    drop: function(event, ui) {
                        $('<div class="row"></div>"').appendTo(this);
                    },
                    activate: function(event, ui) {
                        $(ui.helper).draggable({ revert: "valid"});
                    }
                });
        });

在我看来，新创建的元素不是 dropavel ...：/

有什么建议吗？！先感谢您！

Answer 1

首先，确保你的 HTML 代码是：

<div class="container">
   <div class="row"></div>
</div>

那么，你为什么有：

$('<div class="span2"></div>"').appendTo(this);

你应该有：

 $('<div class="span2"></div>').appendTo(this);