Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Found the solution. Turns out draggable is not required with sortable in my use case. Seems that usage of draggable and sortable together with a flot element inside gets confounded. Commenting out the logic as shown in the sample below, solves the problem.</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html lang="en-US"&gt; &lt;head&gt; &lt;title&gt;Flot Mockup&lt;/title&gt; &lt;meta charset="utf-8"/&gt; &lt;!-- Flot recommends using this for IE &lt; 9 for canvas emulator see https://github.com/flot/flot/blob/master/README.md --&gt; &lt;!--[if lte IE 8]&gt;&lt;script language="javascript" type="text/javascript" src="js/flot/excanvas.min.js"&gt;&lt;/script&gt;&lt;![endif]--&gt; &lt;!-- Note: Many extended libraries make use of jQuery.browser which has been deprecated in jquery 1.9 - use 1.8 --&gt; &lt;!--&lt;script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js" &gt;&lt;/script&gt;--&gt; &lt;script language="javascript" type="text/javascript" src="js/jquery-1.8.0.js" &gt;&lt;/script&gt; &lt;script language="javascript" type="text/javascript" src="js/jquery-ui-1.10.0.custom.js" &gt;&lt;/script&gt; &lt;script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js" &gt;&lt;/script&gt; &lt;script language="javascript" type="text/javascript" src="js/flot/jquery.flot.resize.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.0.custom.css" /&gt; &lt;!-- CUSTOMIZE/OVERRIDE THE DEFAULT CSS --&gt; &lt;style type="text/css"&gt; html { height: 100%; } body { margin: 0; padding: 0; height: 100%; } /* Headers &amp; Footer in Center &amp; East panes */ h3, h4 { font-size: 1.1em; background: #EEF; border: 1px solid #BBB; border-width: 0 0 1px; padding: 7px 10px; margin: 0; } /* Need this or close button on tab will wrap */ .ui-tabs-nav li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; } /* * TAB-THEME ADJUSTMENTS */ .ui-tabs-nav li { white-space: nowrap; } .ui-tabs-nav li a { font-size: 1em !important; padding: 4px 1.5ex 3px !important; } .ui-tabs-panel { font-size: 1em !important; /* padding: 0 1em !important;*/ } #workSpaceTabs{ padding-bottom: 0 !important; } .isi-default-plot { padding: 20px; width: 90%; height: 90%; font-size: 14px; line-height: 14px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- Center Layout Panel - Workspace --&gt; &lt;div class="ui-layout-center"&gt; &lt;div id="workSpaceTabs" &gt; &lt;ul class="ui-tabs-nav"&gt; &lt;li&gt;&lt;a href="#tabs-1"&gt;Tab 1&lt;/a&gt;&lt;span class='ui-icon ui-icon-close' role='presentation'&gt;Remove Tab&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="tabs-1" class="ui-tabs-panel isi-layout-content"&gt; &lt;div id="t1-sort"&gt; &lt;div id="t1-c1" class="ui-state-active isi-container" style="width:100%; height:300px"&gt; &lt;h3 class="ui-widget-header"&gt;Drag Me - Flot 1&lt;/h3&gt; &lt;div id="t1-c1-p1" class="isi-default-plot isi-flotPlot"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="t1-c2" class="ui-state-active isi-container" style="width:100%; height:250px"&gt; &lt;h3 class="ui-widget-header"&gt;Drag Me - Flot 2&lt;/h3&gt; &lt;div id="t1-c2-p2" class="isi-default-plot isi-flotPlot"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="t1-c3" class="ui-state-active isi-container" style="width:100%; height:300px"&gt; &lt;h3 class="ui-widget-header"&gt;Drag Me 3&lt;/h3&gt; &lt;p&gt; TODO: Try putting a plot inside me&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Layout scripting logic --&gt; &lt;script type="text/javascript"&gt; var tabs = $("#workSpaceTabs").tabs({ heightStyle: "fill" }); $("#t1-sort").sortable({ revert: true }); /* $(".isi-container").draggable({ scroll: true , connectToSortable: "#t1-sort" , containment: "parent" , stop: function( event, ui ) {onContainerDragStop(event, ui);} }); */ &lt;/script&gt; &lt;!-- Flot Plotting Logic --&gt; &lt;script type="text/javascript"&gt; // // Global Plots // var flotPlots = new Array(); // // Std Data Series' from examples // var d1 = []; for (var i = 0; i &lt; 14; i += 0.5) { d1.push([i, Math.sin(i)]); } var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; // A null signifies separate line segments var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; // // Draw a flot plot in each container // $(".isi-flotPlot").each( function(){ var thisID = $(this).attr("id"); var thisSelectorID = "#" + thisID; var plot = $.plot(thisSelectorID, [ d1, d2, d3 ]); flotPlots.push( {id: thisID, plot: plot} ); }); &lt;/script&gt; &lt;!-- Event Handlers --&gt; &lt;script type="text/javascript"&gt; /* // // Drag/Sort doesn't move the canvas elements. // Try refreshing them all to work out a fix. // function onContainerDragStop(event, ui){ for(var i = 0 ; i &lt; flotPlots.length; i++){ //alert("ReDrawing: " + flotPlots[i].id); flotPlots[i].plot.resize(); flotPlots[i].plot.setupGrid(); flotPlots[i].plot.draw(); } } */ &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload