javascript - Jquery Droppable 不适用于动态添加的 DIVS

Question

我有与 This 相同的问题和 This

我需要拖放和调整大小功能，它适用于静态元素，但我必须添加动态 div，对于动态 div，resize 属性工作正常，但是 droppable 功能不工作 ...我在研发上花了最后一天时间并应用了相同的解决方案，但运气不好

这是一个JSSFiddle

我怎样才能克服这个问题

这是代码片段

CSS

 #Section1 > div {
            display: table-cell;
            /*width: 1%;*/
           border-right: 1px dotted red;
            text-align: center;
        }

HTML

 <input type="button" class="Mybutton" value=" Add div" />
    <br />
    <div class="selectorField" style="height: 100px; width: 100px; background-color: green;"></div>

    <div id="Section1" style="height: 100px; line-height: 20px; width: 100%; border: 1px dotted red; display: table;">

        <div class="well droppedFields ui-sortable Resizable" style="width:73px;"></div>

    </div>

JQUERY

   function makeDraggable() {
            $(".selectorField")
                .draggable({
                    containment: $('body'),
                    helper: "clone",
                    stack: "div",
                    cursor: "move",
                    cancel: null
                });
        }
        $(function () {
            var _ctrl_index = 1001;
           $(".Resizable").resizable({ handles: 'e' });
            makeDraggable();

            $(".droppedFields").droppable({
                accept: ":not(.ui-sortable-helper)",


                drop: function (event, ui) {
     var draggable = ui.draggable;
                    draggable = draggable.clone();
                   draggable.appendTo(this);
                    makeDraggable();
                }
            });
// add divs dyynamically
var count = 0;
            $('.Mybutton').click(function () {
                count++;
                if (count < 5) {
                    // alert("aa");

                    var a = $("<div class='well droppedFields ui-sortable Resizable'></div>").appendTo("#Section1");
                    a.droppable();
                    a.resizable({ handles: 'e' });
                }
                else {
                    alert('No more divs to add')
                }
            });
        });

我需要你的帮助

Answer 1

您没有使动态 div droppable。我已经更新了你的 JSfiddle以反射(reflect)这一变化。参见第 52 行。