1
任何人都可以帮忙以下。 Draggable移动div元素，但在停止时，只移动flot轴标签。我相信这是因为由flot创建的画布元素使用绝对定位的画布元素。flot在jQuery UI可拖曳元素
<!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>
拖动后，容器的样式（特别是位置）是什么样的？修改了 – DNS
以解决您的问题DNS。请注意，如何使用绝对定位生成画布。我可以蛮横逼迫它，但是我怀疑当这些地块是“真实”的选择时，这将成为一场噩梦。想知道是否有办法分离，然后重新附着，或者其他一些更简单的同谋手段。 – Jim
画布使用绝对定位的事实应该不重要;它们的占位符（isi-default-plot）具有定位，这意味着画布相对于占位符被定位，而不是页面上的其他位置。尝试使用Chrome/Firebug DOM检查器（鼠标悬停以突出显示），以确认基础和叠加画布确实存在于其预先拖动位置，以及在拖动过程中是否完全改变其父项。 – DNS