1

我正在尝试制作浮动面板

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>

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

UPD：在 chrome 上它不会在点击时消失，但不知何故它会占用所有可能的宽度。

这是 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;
}
4

4 回答 4

1

尝试先追加，然后调用可拖动和调整大小：

$panel.appendTo($container).resizable().draggable();

于 2013-02-15T15:02:30.870 回答
1

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

于 2013-02-15T15:04:53.287 回答
1

在缺少 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>

这可能会有所作为。

这是jsfiddle 的链接。

于 2013-02-18T13:36:00.783 回答
0

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>

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

于 2013-02-19T22:20:38.477 回答