Question

我正在尝试使用

创建浮动面板

var self = this;

this.$widget = (function() {
    var $panel = $("#tmpl-float-panel").tmpl({
        title : title
    });

    //close on click on cross
    $panel.find(".ui-dialog-titlebar-close").click(function() {
        self.hide();
    });

    $panel.draggable({
        containment : "parent",
        handle : "div.ui-dialog-titlebar",
        opacity : 0.75
    }).appendTo($container);

    return $panel;
})();

稍后我用

插入内容

this.$widget.find(".ui-dialog-content").append($content);

这是用于构建面板的jquery模板：

<script id="tmpl-float-panel" type="text/x-jquery-tmpl">
    <div class="ui-widget ui-dialog ui-corner-all ui-widget-content float-panel no-select">
        <div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix">
            <span class="ui-dialog-title">${title}</span>
            <a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
                <span class="ui-icon"></span>
            </a>
        </div>
        <div class="ui-dialog-content ui-widget-content">
        </div>
    </div>
</script>

这是问题所在。当我试图拖动面板（单击标题栏并移动鼠标）时，整个小部件消失。有人可以告诉我为什么吗？

Chrome上的

UPD：它不会在点击时消失，但为什么它会占用所有可能的宽度。

这是html包装浮动面板：

<div id="idA">
<div id="idB">
<!-- here I have panels and other divs -->
</div>
</div>

CSS中的

#idA {
  height: auto !important;
  min-height: 100%;
}

#idB {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

Answer 1

首先尝试追加然后调用draggable和resizable：

$ panel.appendTo（$容器）.resizable（）拖动（）;

Answer 2

我有过一次，问题是父div有css属性position: absolute。效果是当我开始拖动它时，项目被放在右下角的屏幕角落。所以首先你认为它已经消失但是如果你把它向左上方拖动它就会出现。

Answer 3

缺少一个jsfiddle，我根据你提供的代码创建了一个。

在jsfiddle中，面板在我测试过的所有浏览器中都能按预期工作（包括FF，Safari，Chrome，Opera）。

我认为您的问题可能与您未正确定义jQuery模板中的jqueryui对话框关闭按钮这一事实有关，并且标题栏上的单击可能被误解为“.ui-dialog”上的单击事件-titlebar关闭”。在我的jsfiddle中，我定义了：

<a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
    <span class="ui-icon ui-icon-close"></span>
</a>

可能会有所不同。

以下是link to the jsfiddle.

Answer 4

我通过将display: inline-block添加到浮动面板

来解决了这个问题

<script id="tmpl-float-panel" type="text/x-jquery-tmpl">
    <div style="display: inline-block" class="ui-widget ui-dialog ui-corner-all ui-widget-content float-panel no-select">
        <div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix">
            <span class="ui-dialog-title">${title}</span>
            <a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
                <span class="ui-icon"></span>
            </a>
        </div>
        <div class="ui-dialog-content ui-widget-content">
        </div>
    </div>
</script>

任何更优雅解决方案的想法？

draggable在开始拖动时消失

4 个答案: