jquery - 当我关闭小部件时 div 变热 - Jquery 可拖动

Question

我正在为我的一个网站使用 Jquery-Ui for Jquery draggable。这是我的 fiddle fiddle .我可以在屏幕上添加多个小部件。它工作正常，但是当我关闭任何一个并尝试拖动另一个时，小部件位置会更改到文档顶部。如何防止小部件将其位置更改为顶部？

这是我的脚本，

var widgetId = 0;
$("#btnAddWidget").click(function () {
                $("#container").append('<div class="Widget" id="widget' + widgetId + '"><input type="button" class="close" id="btnclose' + widgetId + '" value="Close" /><input type="button" class="addgraph" id="btnAddGraph' + widgetId + '" value="Add Graph" /></div>');
                widgetId++;
                $(".Widget").draggable({
                    containment: '#container',                    
                    cursor: 'move',
                    start: function (event, ui) {
                        // Show start dragged position of image.

                        var Startpos = $(this).position();
                        if (Startpos.top < 0) {
                            debugger;
                            $(this).css("top", 0);
                        }
                    },

                    // Find position where image is dropped.
                    stop: function (event, ui) {
                        // Show dropped position.
                        var Stoppos = $(this).position();                        
                        if (Stoppos.top < 0) {
                            debugger;
                            $(this).css("top", 0);
                        }
                    }
                });
                $(".Widget").resizable({ containment: 'parent', });
            });

            function setPositionToRelative(element)
            {

            }

            //Close Button Event Binding or Delete Widget
            $(document).on('click', '.close', function (e) {
                e.preventDefault();
                //when delete widget position set to absolute of other widgets
                $('.Widget').each(function () {
                    var top = $(this).position().top + 'px';
                    var left = $(this).position().left + 'px';
                    $(this).css({ top: top, left: left });
                }).css({ position: 'absolute' });

                $(this).parent().remove();

            });

Answer 1

如果您想手动将小部件放到顶部，请先回答或将其添加到您的 css。

#container {
    height: 500px
}

或

#container {
    min-height: 500px
}