gridster

问题 i am building a dashboard with gridster and highcharts. If i resize the window and a widget with a highchart is bigger than the window, i want to resize it to make it smaller and gridster should recalculate the positions of the others. I tried this code to make a widget and its highchart smaller if its bigger than the windows width: $( ".dashboard > li" ).each(function() { var chart = $(this).children('div'); // console.log(' Window: ' + width); console.log(chart); if(chart.width() > width) {

问题 i am building a dashboard with gridster and highcharts. If i resize the window and a widget with a highchart is bigger than the window, i want to resize it to make it smaller and gridster should recalculate the positions of the others. I tried this code to make a widget and its highchart smaller if its bigger than the windows width: $( ".dashboard > li" ).each(function() { var chart = $(this).children('div'); // console.log(' Window: ' + width); console.log(chart); if(chart.width() > width) {

问题 I have created a dashboard using angularjs, kendoui charts and angular gridster (https://github.com/ManifestWebDesign/angular-gridster). So I have a function to add a gridster with chart like below :- // add widget to a dashboard $scope.addWidget = function () { // new widget configuration var newWidget = { id: $scope.allWidgetData.selectedOption.id, data_source: {}, config: { name: $scope.allWidgetData.selectedOption.name, sizeX: 3, sizeY: 2, row: $scope.row, col: $scope.col } }; } // make

问题 I am trying to use Gridster.js to do some drag and drop functionality in my project. I am using a bunch of divs for my widgets, with forms and buttons inside of these, instead of using an unordered list. My issue is that my first column is not being able to drag, and i can not drop my widgets anywhere. They just drop to back to their original spot Here is my layout: <div class="gridster"> <div class="dragMe" data-row="1" data-col="1" data-sizex="1" data-sizey="1"> <form> <button>//button

问题 How can I drag a grid from one gridster to another gridster? $(function () { //DOM Ready $(".gridster ul").gridster({ widget_margins: [5, 5], widget_base_dimensions: [160, 160] }); var gridster = $(".gridster ul").gridster().data('gridster'); $( ".draggable" ).draggable(); $( ".gridster " ).droppable({ drop: function( event, ui ) { $( ".draggable" ).removeAttr("style"); gridster.add_widget('<li class="new"></li>', 1, 1); } }); }); 回答1: You can use the remove_widget and add_widget functions of

问题 I am new to Javascript and trying to use Gridster with Knockout. I have a database with items, and I use knockout foreach to bind them to a UL. The UL is styled with the Gridster library. Everything works great unless I try to add additional elements to the UL via the ObservableArray in the viewmodel. Can anyone help me understand the scope and order of operations here? It feels like the Gridster library isn't doing its styling to the new widgets. This jsfiddle shows a working demo of the

问题 is there any way to make Gridster.js tile(s) stick, that is not move up vertically to fill empty space. Kind of like the way a layout program with snap-to-grid turned on works... 回答1: Use this fork https://github.com/dsmorse/gridster.js with shift_widgets_up: false option. See demo : http://dsmorse.github.io/gridster.js/demos/sticky-postion.html 回答2: Have you tried packery? http://packery.metafizzy.co/ This library has many drag and drop features. 回答3: You may also be interested in the

问题 I'm using Gridster (http://gridster.net/) which able to drag the content inside the li . In my li there is a clickable div. <li data-row="1" data-col="1" data-sizex="2" data-sizey="1"> <a href=' '> <div> content </div> </a> </li> so here is the problem I'm facing, when I stop and release the dragging, it will invoke the click in the div, how can I just dragging the div, but not invoking the click after drag stop&release. I do not want it to redirect to another page after dragging( user drag

问题 Highcharts inside the gridster widgets not resize automatically when I resize the gridster widgets. When I resize the window, highchart are resized based on the grid sizes. But it should happen automatically when I resize the grid. Code I tried is below : <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>GridSter With HighChart</title> <link rel="stylesheet" type="text/css" href="http://gridster.net/dist/jquery.gridster.css"> <link rel="stylesheet" type=

问题 I can remove widget but I am facing problem with positioning the remain widgets. When I remove a widget from top the bottom widget will automatically get moved to top its looks good. But when I remove a widget from left the right widget not gets moved to left? 回答1: Finally i solved this problem <div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0<span class="removeWidget">X</span></li> <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1<span