javascript - draggable disappears on start dragging -

javascript - draggable disappears on start dragging -

i'm trying create floating panel with

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); homecoming $panel; })();

later insert content with

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

and here's jquery template used build panel:

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

here's question. when i'm trying drag panel (clicking on title bar , moving mouse), whole widget disappears. can tell me why?

upd: on chrome not disappear on click, somewhy takes possible width.

here's html wrapping floating panel:

<div id="ida"> <div id="idb"> <!-- here have panels , other divs --> </div> </div>

in css have

#ida { height: auto !important; min-height: 100%; } #idb { position: absolute; width: 100%; height: 100%; overflow: hidden; }

in lack of jsfiddle i've created one, based on code you've provided.

within jsfiddle, panel works expected in browsers i've tested (including ff, safari, chrome, opera).

i think issue might related fact haven't defined jqueryui dialog close button in jquery template , click on title bar may have been misinterpreted click event on ".ui-dialog-titlebar-close". in jsfiddle i've defined:

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

which might create difference.

here link jsfiddle.

javascript jquery jquery-ui