任何人都可以帮助解决以下问题。Draggable 移动 div 元素，但在停止时，仅移动浮动轴标签。我相信这是因为 flot 创建的画布元素使用了绝对定位的画布元素。
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Flot Mockup</title>
<meta charset="utf-8"/>
<!-- Flot recommends using this for IE < 9 for canvas emulator see https://github.com/flot/flot/blob/master/README.md -->
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/flot/excanvas.min.js"></script><![endif]-->
<!-- Note: Many extended libraries make use of jQuery.browser which has been deprecated in jquery 1.9 - use 1.8 -->
<!--<script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js" ></script>-->
<script language="javascript" type="text/javascript" src="js/jquery-1.8.0.js" ></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui-1.10.0.custom.js" ></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js" ></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.resize.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.0.custom.css" />
<!-- CUSTOMIZE/OVERRIDE THE DEFAULT CSS -->
<style type="text/css">
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
/* Headers & Footer in Center & 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;
}
</style>
</head>
<body>
<!-- Center Layout Panel - Workspace -->
<div class="ui-layout-center">
<div id="workSpaceTabs" >
<ul class="ui-tabs-nav">
<li><a href="#tabs-1">Tab 1</a><span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>
</ul>
<div id="tabs-1" class="ui-tabs-panel isi-layout-content">
<div id="t1-sort">
<div id="t1-c1" class="ui-state-active isi-container" style="width:100%; height:300px">
<h3 class="ui-widget-header">Drag Me - Flot 1</h3>
<div id="t1-c1-p1" class="isi-default-plot isi-flotPlot"></div>
</div>
<div id="t1-c2" class="ui-state-active isi-container" style="width:100%; height:250px">
<h3 class="ui-widget-header">Drag Me - Flot 2</h3>
<div id="t1-c2-p2" class="isi-default-plot isi-flotPlot"></div>
</div>
<div id="t1-c3" class="ui-state-active isi-container" style="width:100%; height:300px">
<h3 class="ui-widget-header">Drag Me 3</h3>
<p> TODO: Try putting a plot inside me</p>
</div>
</div>
</div>
</div>
</div>
<!-- Layout scripting logic -->
<script type="text/javascript">
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);}
});
</script>
<!-- Flot Plotting Logic -->
<script type="text/javascript">
//
// Global Plots
//
var flotPlots = new Array();
//
// Std Data Series' from examples
//
var d1 = [];
for (var i = 0; i < 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} );
});
</script>
<!-- Event Handlers -->
<script type="text/javascript">
//
// 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 < flotPlots.length; i++){
//alert("ReDrawing: " + flotPlots[i].id);
flotPlots[i].plot.resize();
flotPlots[i].plot.setupGrid();
flotPlots[i].plot.draw();
}
}
</script>
</body>
</html>
修改后--这里是拖拽操作前后生成的源码--
拖动前：
<div id="t1-c1" class="ui-state-active isi-container ui-draggable" style="width: 100%; height: 300px; position: relative;">
<h3 class="ui-widget-header">Drag Me - Flot 1</h3>
<div style="padding: 0px; position: relative;" id="t1-c1-p1" class="isi-default-plot isi-flotPlot"><canvas height="270" width="1634" class="base"></canvas><canvas style="position: absolute; left: 0px; top: 0px; width: 1634px; height: 270px;" height="270" width="1634" class="overlay"></canvas><div class="tickLabels" style="font-size:smaller"><div class="xAxis x1Axis" style="color:#545454"><div class="tickLabel" style="position:absolute;text-align:center;left:-26px;top:256px;width:108px">0</div><div class="tickLabel" style="position:absolute;text-align:center;left:93px;top:256px;width:108px">1</div><div class="tickLabel" style="position:absolute;text-align:center;left:211px;top:256px;width:108px">2</div><div class="tickLabel" style="position:absolute;text-align:center;left:330px;top:256px;width:108px">3</div><div class="tickLabel" style="position:absolute;text-align:center;left:449px;top:256px;width:108px">4</div><div class="tickLabel" style="position:absolute;text-align:center;left:567px;top:256px;width:108px">5</div><div class="tickLabel" style="position:absolute;text-align:center;left:686px;top:256px;width:108px">6</div><div class="tickLabel" style="position:absolute;text-align:center;left:805px;top:256px;width:108px">7</div><div class="tickLabel" style="position:absolute;text-align:center;left:923px;top:256px;width:108px">8</div><div class="tickLabel" style="position:absolute;text-align:center;left:1042px;top:256px;width:108px">9</div><div class="tickLabel" style="position:absolute;text-align:center;left:1161px;top:256px;width:108px">10</div><div class="tickLabel" style="position:absolute;text-align:center;left:1279px;top:256px;width:108px">11</div><div class="tickLabel" style="position:absolute;text-align:center;left:1398px;top:256px;width:108px">12</div><div class="tickLabel" style="position:absolute;text-align:center;left:1517px;top:256px;width:108px">13</div></div><div class="yAxis y1Axis" style="color:#545454"><div class="tickLabel" style="position:absolute;text-align:right;top:242px;right:1613px;width:21px">-2.5</div><div class="tickLabel" style="position:absolute;text-align:right;top:207px;right:1613px;width:21px">0.0</div><div class="tickLabel" style="position:absolute;text-align:right;top:172px;right:1613px;width:21px">2.5</div><div class="tickLabel" style="position:absolute;text-align:right;top:137px;right:1613px;width:21px">5.0</div><div class="tickLabel" style="position:absolute;text-align:right;top:102px;right:1613px;width:21px">7.5</div><div class="tickLabel" style="position:absolute;text-align:right;top:67px;right:1613px;width:21px">10.0</div><div class="tickLabel" style="position:absolute;text-align:right;top:32px;right:1613px;width:21px">12.5</div><div class="tickLabel" style="position:absolute;text-align:right;top:-3px;right:1613px;width:21px">15.0</div></div></div></div>
</div>
拖动后：
<div class="ui-state-active isi-container ui-draggable ui-draggable-dragging" style="width: 100%; height: 300px; position: relative; left: auto; top: auto; display: block;">
<h3 class="ui-widget-header">Drag Me - Flot 1</h3>
<div style="padding: 0px; position: relative;" id="t1-c1-p1" class="isi-default-plot isi-flotPlot"><canvas height="270" width="1634" class="base"></canvas><canvas style="position: absolute; left: 0px; top: 0px; width: 1634px; height: 270px;" height="270" width="1634" class="overlay"></canvas><div class="tickLabels" style="font-size:smaller"><div class="xAxis x1Axis" style="color:#545454"><div class="tickLabel" style="position:absolute;text-align:center;left:-26px;top:256px;width:108px">0</div><div class="tickLabel" style="position:absolute;text-align:center;left:93px;top:256px;width:108px">1</div><div class="tickLabel" style="position:absolute;text-align:center;left:211px;top:256px;width:108px">2</div><div class="tickLabel" style="position:absolute;text-align:center;left:330px;top:256px;width:108px">3</div><div class="tickLabel" style="position:absolute;text-align:center;left:449px;top:256px;width:108px">4</div><div class="tickLabel" style="position:absolute;text-align:center;left:567px;top:256px;width:108px">5</div><div class="tickLabel" style="position:absolute;text-align:center;left:686px;top:256px;width:108px">6</div><div class="tickLabel" style="position:absolute;text-align:center;left:805px;top:256px;width:108px">7</div><div class="tickLabel" style="position:absolute;text-align:center;left:923px;top:256px;width:108px">8</div><div class="tickLabel" style="position:absolute;text-align:center;left:1042px;top:256px;width:108px">9</div><div class="tickLabel" style="position:absolute;text-align:center;left:1161px;top:256px;width:108px">10</div><div class="tickLabel" style="position:absolute;text-align:center;left:1279px;top:256px;width:108px">11</div><div class="tickLabel" style="position:absolute;text-align:center;left:1398px;top:256px;width:108px">12</div><div class="tickLabel" style="position:absolute;text-align:center;left:1517px;top:256px;width:108px">13</div></div><div class="yAxis y1Axis" style="color:#545454"><div class="tickLabel" style="position:absolute;text-align:right;top:242px;right:1613px;width:21px">-2.5</div><div class="tickLabel" style="position:absolute;text-align:right;top:207px;right:1613px;width:21px">0.0</div><div class="tickLabel" style="position:absolute;text-align:right;top:172px;right:1613px;width:21px">2.5</div><div class="tickLabel" style="position:absolute;text-align:right;top:137px;right:1613px;width:21px">5.0</div><div class="tickLabel" style="position:absolute;text-align:right;top:102px;right:1613px;width:21px">7.5</div><div class="tickLabel" style="position:absolute;text-align:right;top:67px;right:1613px;width:21px">10.0</div><div class="tickLabel" style="position:absolute;text-align:right;top:32px;right:1613px;width:21px">12.5</div><div class="tickLabel" style="position:absolute;text-align:right;top:-3px;right:1613px;width:21px">15.0</div></div></div></div>
</div>