Drag and Drop chart disappears
191 views
Skip to first unread message
Wouter Gerrits
Apr 10, 2012, 10:00:03 AM4/10/12
to google-visua...@googlegroups.com
Hi, when i want to drag my chart and drop is it disappears.
I dont know why?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Drag Drop Panels - Web Developer Plus Demos</title>
<link href="http://localhost:54543/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="http://localhost:54543/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://localhost:54543/Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 860, 580],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<script type="text/javascript" >
$(function () {
$('.dragbox')
.each(function () {
$(this).hover(function () {
$(this).find('h2').addClass('collapse');
}, function () {
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function () {
$(this).find('.configure').css('visibility', 'visible');
}, function () {
$(this).find('.configure').css('visibility', 'hidden');
})
.click(function () {
$(this).siblings('.dragbox-content').toggle();
})
.end()
.find('.configure').css('visibility', 'hidden');
});
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function (event, ui) {
$(ui.item).find('h2').click();
var sortorder = '';
$('.column').each(function () {
var itemorder = $(this).sortable('toArray');
var columnId = $(this).attr('id');
sortorder += columnId + '=' + itemorder.toString() + '&';
});
alert('SortOrder: ' + sortorder);
/*Pass sortorder variable to server using ajax to save state*/
}
})
.disableSelection();
});
</script>
<div class="column" id="column2">
<div class="dragbox" id="item2" >
<h2>Clock</h2>
</div>
<div class="dragbox" id="item2" >
<h2>Chart
</h2>
<div id="chart_div" style="width: 400px; height: 300px;"></div>
</div>
</div>
</body>
</html>
asgallant
Apr 10, 2012, 11:34:06 AM4/10/12
to google-visua...@googlegroups.com
I suspect this has something to do with the way drag-n-drop js modules handle iFrames, as it works correctly when you set the forceIFrame option to false:
http://jsfiddle.net/hHZQ4/1/
Reply all
Reply to author
Forward
0 new messages