Hi everyone,
I have a strange problem with the containment option of jQuery UI draggable. The basic code of the page can be found below.
I drag draggables from the #componentpane (exactly from the tabs created with jQuery UI tabs, content is generated by JavaScript) into the #dragcontainment. There the draggable is cloned and the clone made draggable again with new parameters (the original is reverted). One of these is that #dragcontainment is the containment for the new draggable. This works fine at the top and left edges. But the bottom edge of the area I can move the draggable in is smaller than the size of #dragcontainment. It seems like jQuery is substracting the space from top of the page to the top egde of the containment DIV from the height of the containment. With the right edge the same is happening, it is substracting the space between left edge of the viewport and left egde of the DIV.
Has anyone an idea what is causing this behaviour and how I can fix it? It is regardless of where I place the DIV, inside a ui-widget container or as a direct child of BODY, between the first 2 ui-widgets or the last 2 ui-widgets, the problem remains the same.
- <div class="ui-widget pagehead">
- <div class="ui-widget-header ui-corner-all ui-helper-clearfix">
- <!-- Content -->
- </div>
- </div>
- <div class="optionspane ui-widget">
- <div class="ui-widget-header ui-corner-top">
- <h2 data-localize="options.title">Optionen</h2>
- </div>
- <div class="ui-widget-content ui-corner-bottom ui-helper-clearfix">
- <div class="optionbox"></div>
- <div class="optionbox"></div>
- </div>
- </div>
- <div id="drag">
- <div id="componentpane" class="ui-widget">
- <div class="ui-widget-header ui-corner-top">
- <h2 data-localize="components.title">Komponenten</h2>
- </div>
- <div id="inventorytabs">
- <ul id="tabheaders">
- <!-- Content will be generated by JavaScript -->
- </ul>
- <!-- Content will be generated by JavaScript -->
- </div>
- </div>
- <div id="editorpane" class="editor ui-widget">
- <div class="ui-widget-header ui-corner-top">
- <h2 data-localize="editor.title">Editor</h2>
- </div>
- <div class="ui-widget-content ui-helper-clearfix">
- <div id="dragcontainment">
- <div id="trashtableleft" class="trashtable">
- <!-- Content will be generated by JavaScript -->
- </div>
- <table id="editorgrid" class="edittable">
- <!-- Content will be generated by JavaScript -->
- </table>
- <div id="trashtableright" class="trashtable">
- <!-- Content will be generated by JavaScript -->
- </div>
- </div>
- </div>
- <div class="ui-widget-header ui-corner-bottom">
- <h2> </h2>
- </div>
- </div>
- </div>