EzDevInfo.com

How do I drag a grid from one gridster to another gridster?

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);                 
        }
    });                         
});

How to drop a draggable into gridster

Does anyone know if it is possible to drop a draggable element into gridster? http://gridster.net/#documentation

It seems great for my purposes, but can you add them to the grid by dropping it?

I want to drag images into gridster. Is is possible? Can I see a sample of this?

If this is not possible, do you know of any alternatives?

I need to drag images into discrete locations inside a div and be able to save the positions as well as move the images around inside the canvas.

gridster, how to auto fit to browser size change?

Hello to all gridster users,

I'm trying to find a way to auto-resize gridster container.

In a way that when user changes browser size, corresponding gridster widgets resized. (In which number of columns and rows does not change, but actual size will)

I can calculate the values for "widget_base_dimensions" as browser size changes,

however I couldn't find a way to update/execute to widgets to cope with new size.

I was seeking if there is a function that supports this kind of feature and I noticed that

on line 3529 on jquery.gridster.js,

/**
* Recalculates the offsets for the faux grid. You need to use it when
* the browser is resized.
*
* @method recalculate_faux_grid
* @return {Object} Returns the instance of the Gridster class.
*/
fn.recalculate_faux_grid = function() {
    var aw = this.$wrapper.width();
    this.baseX = ($(window).width() - aw) / 2;
    this.baseY = this.$wrapper.offset().top;

    $.each(this.faux_grid, $.proxy(function(i, coords) {
        this.faux_grid[i] = coords.update({
            left: this.baseX + (coords.data.col -1) * this.min_widget_width,
            top: this.baseY + (coords.data.row -1) * this.min_widget_height
        });

    }, this));

    return this;
};

I tried to some how utilize them but failed :(

If anyone have been successfully utilized this code or work around, can you please help me?

Thanks..

Widgets with different dynamic content (angular-gridster)

I am trying to create a web dashboard based on angularjs with angular-gridster module. The gridster works fine and I don't have any problems binding content to it (like text or images with ng-bind-html).

But in fact I don't want to add only text or images to these "widgets", I'm trying to create a dashboard with dynamic content in it. So, as a user I want to add a new widget to the dashboard and choose a type (for example a clock-widget or something else) and maybe configure the widget.

The problem is that I don't know how to add dynamic content (javascript, different html elements, ...) to a widget. The widget is created out of a scope object, like:

$scope.standardItems = [
    { name: "Item 1", content: "Text 1", sizeX: 2, sizeY: 1, row: 0, col: 0 },
    { name: "Item 2", content: "Clock widget", sizeX: 2, sizeY: 2, row: 0, col: 2 }
];

I am still a beginner in angular so excuse me if this is a stupid question...

What could be a good solution to add javascript and html elements? Directives? Own Modules? But how?

Thank you for your help!

How to make Gridster added widgets resizable?

I've based my project off this Fiddle

But I have made it so you can add widgets using:

$(document).on("click", "#add", function() {
var gridster = $(".layouts_grid ul").gridster().data('gridster');    

gridster.add_widget('<li class="layout_block" data-row="1" data-col="1" data-sizex="1" data-sizey="1"><div class="remove_element">X</div></li>', 1, 1)
    .resizable({ 
    grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)],
    animate: false,
    minWidth: grid_size,
    minHeight: grid_size,
    containment: '#layouts_grid ul',
    autoHide: true,
    stop: function(event, ui) {
        var resized = $(this);
        setTimeout(function() {
            resizeBlock(resized);
        }, 300);
    } });

Now this works, it does create a new widget, but the widget is not resizeable. Even though it's created with the class and id needed, I think it's because It's a dynamically added widget. Is there any way I can get this to work?

Thanks.

How to drag an element from one gridster to another? [closed]

Has anybody tried to drag a cell from one Gridster to another? I have been trying to get that working.. but with no luck. Any help please?

Good Gridster Demos?

Are there any good demonstrations of Gridster online on jsfiddle or jsbin, etc.??

Is there a way to control the maximum height and width of the gridster table? and make the widgets play inside this container only? does gridster use Jquery-UI by default?

Prevent `click` while the link is dragged

I'm using gridster to make a grid of links. The link should work normal when click on it. Problem is it's also get clicked after dragged. How can I stop it from being clicked after dragged?

Please check: http://jsfiddle.net/b_m_h/tr4cU/

<div class="gridster">
    <ul id="reszable">
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><a rel='nofollow' href="http://google.com" target="_blank">LINK</a></li>
        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
    </ul>
</div>

Js:

$(function(){

    $(".gridster ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [100, 100]
    });

    var gridster = $(".gridster ul").gridster().data('gridster');

});

setting minimum width and height for each gridster.js widget

I'm using gridster.js combined with Jquery UI to make it resizable by dragging using this bit:

$('.layout_block').resizable({
    grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)],
    animate: false,
    minWidth: grid_size,
    minHeight: grid_size,
    containment: '#layouts_grid ul',
    autoHide: true,
    stop: function(event, ui) {
        var resized = $(this);
        setTimeout(function() {
            resizeBlock(resized);
        }, 300);
    }
});

$('.ui-resizable-handle').hover(function() {
    layout.disable();
}, function() {

    layout.enable();
});

function resizeBlock(elmObj) {

    var elmObj = $(elmObj);
    var w = elmObj.width() - grid_size;
    var h = elmObj.height() - grid_size;

    for (var grid_w = 1; w > 0; w -= (grid_size + (grid_margin * 2))) {

        grid_w++;
    }

    for (var grid_h = 1; h > 0; h -= (grid_size + (grid_margin * 2))) {

        grid_h++;
    }

    layout.resize_widget(elmObj, grid_w, grid_h);
}

as suggested on GitHub:

http://jsfiddle.net/maxgalbu/UfyjW/

I need to specify minimum width and height for each widget and not for gridster genrally.

Is there an obvious way to achieve this functionality?

Thanks

Gridster remove widget by dragging into div

I am using gridster.js and am trying to figure out a good way to set it up where I can drag one of the widgets into a "trash can" like div and have it remove that widget from the grid. If anyone has any thoughts on this that would be great. Here is what I found but was trying to figure out the best way to make it work with gridster.

$(".widget").draggable();
    $('#trash-can').droppable({
        drop: function(event, ui) {
            $(ui.draggable).remove();
        }
    });

Any thoughts? Thanks in advance.

Make gridster.js tiles stick in specific grid positions (snap to grid)

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...

How do I avoid a click event firing after dragging a gridster.js widget with clickable content?

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 rel='nofollow' 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 and release ..since when drag,it need to click the div,meanwhile, the div can be clicked, so when stop&release the drag, it will invoke the click )

$(function(){ //DOM Ready

    var gridster = $(".gridster ul").gridster(
    {
          widget_margins: [5, 5],
        widget_base_dimensions: [128, 130],
        max_size_y: 2,
        max_size_x: 2,
        extra_cols: 6
    }
    ).data('gridster');
    //which i tried but failed
    gridster.draggable.stop(){
        onclick = "false";
    }


//   gridster.resize_widget($('.gridster li').eq(0), 1,1);

});

or anyone can give hints about how to invoke or use the function that provided by gridster

draggable.stop: function(event, ui){} A callback for when dragging stops.

I guess there will be some implementation on here.

initial solution but still not working yet

    var gridster ,draggable ;
   $(function () {
        gridster = $(".gridster > ul").find("> li ").click(function(e){
            !draggable && alert(1) //ipad2 ，not show alert
            draggable=0;
            alert(draggable);
            }).end()
            .gridster({widget_margins: [5, 5],
            widget_base_dimensions: [128, 130],min_cols: 10,min_rows: 20
            ,serialize_params: function($w, wgd) {
                return {
                    id: wgd.el[0].id
                    //,col: wgd.col
                    //,row: wgd.row
                };
            }
            ,draggable: {
                start:function(event, ui){ 
                //  alert("hekio);");
                    draggable=1; }
            }
        }).data('gridster');
    //gridster.disable();
//   gridster.resize_widget($('.gridster li').eq(0), 1,1);
         if(!dragged){
            $("a#blue.grid").click(function(){
            window.location = '../yokotachi/category_list.php?category=yokosmart';
        });
            }
    // RESET DRAGGED SINCE CLICK EVENT IS FIRED AFTER drag stop
            dragged = 0
    });

Draggable DIV (with gridster.js) and inline editing not working

I want to build a draggable grid with gridster and want to enable contenteditable = true in every draggable DIV. But at the moment I'm just able to drag the DIVs around, it seems that gridster.js is overruling the click event or something, so the contenteditable = true parameter does not recognize that I click into the DIV.

I tried to define a draggable handle, so that the DIV can be just dragged with that handle (this worked with jQuery UI draggable), but this also does not work.

Is it possible to drag the DIVs around, and when the user fires a double-click, the DIV where he clicked gets editable?

My HTML code looks like:

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
            <div contenteditable="true">Test 1</div>
            <span class="drag-handle">HAND</span>
        </li>
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
            <div contenteditable="true">Test 2</div>
            <span class="drag-handle">HAND</span>
        </li>
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
            <div contenteditable="true">Test 3</div>
            <span class="drag-handle">HAND</span>
        </li>
    </ul>
</div>

My js looks like:

$(document).ready(function() {
    var grid = $(".gridster ul").gridster({
        max_cols: 2,
        widget_margins: [10, 2],
        widget_base_dimensions: [140, 40],
        resize: {
            enabled: true,
            axes: ['x']
        },
        draggable: {
            handle: '.drag-handle'
        }
    })

    $("li").dblclick(function() {
        grid.data('gridster').disable();
        $(this + " p").attr("contenteditable","true");
    });
});

At the moment it works that after a double-click the gridster.js will get disabled, but the content is not editable afterwards.

EDIT: Seems that there is a problem with the focus() event. When I explicitly register the click() event and call a focus() on the editable element, I'm able to edit the text!

Get new size of Gridster widget after resize

Using Gridster, we have created a grid with resizable widgets using the resize.enabled config option.

After the user finishes resizing a Gridster widget, we would like to get new final size of the widget. How can we do this?

not sure how to use gridster.serialize() with Gridster jQuery plugin

I've just started using the Gridster jQuery plugin and I'm having trouble using gridster.serialize(). According to the site, it is supposed to create a JavaScript array of objects with positions of all the widgets, ready to be encoded as a JSON string.

I just have some basic code:

        $(function(){ //DOM Ready
            $(".gridster ul").gridster({
                widget_margins: [10, 10],
                widget_base_dimensions: [140, 140]
            });
        });

With corresponding HTML:

    <div class="gridster">
        <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">1</li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">1</li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">1</li>

        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1">2</li>
        <li data-row="2" data-col="2" data-sizex="3" data-sizey="2">2</li>

        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">3</li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1">3</li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1">3</li>
        </ul>
    </div>

And it's not entirely clear to me how the gridster.serialize() function is suppose to work. I'm just trying to record the current size/position of all the tiles in my grid and put it into an array of some kind. Anyone have any ideas?

EDIT: Here's the site.