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/
On Tuesday, April 10, 2012 10:00:03 AM UTC-4, Wouter Gerrits wrote: > > 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> > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/37ftbwoEoR4J. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
