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

Question

我的问题与This和This

相同

我需要拖放和调整大小功能，它适用于静态元素，但我必须添加动态div，对于动态div，调整大小属性工作正常< / strong>，但可放弃功能无法正常工作 ...我在R＆amp; D中度过了最后一天，并应用了相同的解决方案，但没有任何问题

这是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以反映此更改。见第52行。

Answer 2

请看以下小提琴。

http://jsfiddle.net/tdorbbv6/8/

        function makeDraggable() {
        $(".selectorField")
            .draggable({
                containment: $('body'),
                helper: "clone",
                stack: "div",
                cursor: "move",
                cancel: null
            });
    }
function Droppable(){
 $(".droppedFields").droppable({

            accept: ":not(.ui-sortable-helper)",


            drop: function (event, ui) {


                var draggable = ui.draggable;
                draggable = draggable.clone();
               draggable.appendTo(this);
             //   $(ui.draggable).hide();

                makeDraggable();
            }
        });
}
        $(function () {
        var _ctrl_index = 1001;
        // function docReady() {


       $(".Resizable").resizable({ handles: 'e' });

        makeDraggable();




   var count = 0;
        $('.Mybutton').click(function () {
            count++;
            if (count < 5) {
                // alert("aa");

                var a = $("<div class='well droppedFields ui-sortable Resizable'></div>").appendTo("#Section1");
               Droppable();
                //a.droppable();
                //a.resizable({ handles: 'e' });
                //  a.makedroppable(); { handles: 'e' }

            }
            else {
                alert('No more divs to add')
            }
        });
    });

动态添加控件后，您必须再次将事件分配给该控件。在函数引号内写下droppable的代码。

添加控件后，只需调用该函数即可绑定droppable事件。

希望有所帮助。