Question

我正在使用Jquery-Ui for Jquery draggable for my website。这是我的小提琴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

我从你的小提琴中删除了这段代码：

$('.Widget').each(function () {
   var top = $(this).position().top + 'px';
   var left = $(this).position().left + 'px';
   $(this).css({ top: top, left: left });
}).css({ position: 'absolute' });

我非常确定删除它会为您提供所需的结果。紧急点击时调用此函数，并为每个.widget元素提供不需要的css属性。

希望这有帮助。

Answer 2

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

#container {
    height: 500px
}

或

#container {
    min-height: 500px
}

当我关闭小部件时，div成为顶级 - Jquery可拖动

2 个答案: