draggable在开始拖动时消失

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>

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

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;
}

Answer 1

尝试先添加，然后调用draggable和resizable：

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

Answer 2

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

Answer 3

在缺少jsfiddle的情况下，我根据您提供的代码创建了一个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的链接。

Answer 4

我通过添加display: inline-block to float panel解决了这个问题

<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>

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