Make widget immovable

[green-arrow]

I know that the possiblity exists to disable dragging on widgets within gridster, but what would it take to make a widget completely immovable. For example, I want widget X to always be at the top left of the screen and it cannot be dragged or moved by dragging another widget to its position.

Looking into the source code it seems that this could possibly be done by doing a check in each "can widget move" method to see if the widget is "fixed" or not. If it is fixed, false is returned. This is just my idea from a cursory glance, I do not have much experience with this plugin yet and am just wondering what effort this option would require.

Thanks!

[FRickReich]

i did it by using numbers that are out of range, i put items into row 1, and started the rest lower and then for the footer i use a number like 20, so its always at the bottom.

[green-arrow]

Ah I see. I actually went ahead and added an option to Gridster called "fixed_selector". It uses the designated selector to mark widgets as immovable. I added a convenience function to the gridster class that returns true if a widget is marked as fixed, false otherwise. I also added calls to the "is_widget_fixed" method in the following methods:

1) fn.can_go_widget_up 2) fn.move_widget_to 3) fn.move_widget_down 4) fn.can_move_to

Also, in the method fn.manage_movements I wrapped the call "this.move_widget_down" in an if statement. This is because I modified the method "move_widget_down" to return false if the widget is marked as fixed. I assume this is ok since that method had a line to return false if the widget was null. The next statement "set_placeholder" is only called if the function "move_widget_down" does not return false.

I would be more than happy to upload my modified file for anyone to look at. I don't know if anyone else wants this functionality or not.

[green-arrow]

So the steps I specified above work for the most part, but every once in a while a widget will overlap a 'fixed' widget. I've tried going through the source code but can't figure out what's happening. I'm sure this plugin's author could fix it right away.

I hope that this can become a feature in the near future!

[dustmoo]

The problem is that gridster doesn't have very good hit collision testing. It really only tests the upper-left square, because when it places a widget it then just shifts everything down.

I ended up writing a whole new collision model for this and added widget replacement to the library.

You can look around at the code here:

https://github.com/dustmoo/gridster.js

Check the "map app" branch, it has the most updated code.

Actually give me a few, I am going to merge the changes into my master branch and update the documentation. I am sure it will do what you want.

[dustmoo]

I have updated the readme.. It explains how you can set a static class.

This version is heavily modified, designed to swap widget positions rather than just slide them down. Please play with it and let me know if you like it. I am not sure that griderster is being actively developed. If there is interest, I may continue to clean up my version and keep it going for the public.

Thanks,

Dustin

[green-arrow]

I took a look at your updated version and like the added ability for widgets to swap positions instead of just down. However, the static ability doesn't seem to be functioning properly. If I move another widget over a 'static' widget it still moves. I haven't looked into the source just yet so I can't comment as to why this is happening, but I wanted to let you know.

I definitely have interest in this plugin, so by all means continue!

If you'd like, I can try and put together a single page that demonstrates the issue I described above with the static widgets still moving.

[dustmoo]

Try doing a grunt --force to make sure the dist is up to date. It should be, but doesn't hurt to double check.

Are you using a custom class for the static widgets? I haven't fully tested this yet. :) If so, try changing the class to "static" and see if that works better.

Go ahead and put together an example, and I'll trouble-shoot it.

[green-arrow]

I made sure to look at the source and saw the references to the "static" class so I have the latest. I am not using a custom class, just the one provided ("static").

I included a very basic HTML file demonstrating what's happening. In the example, box '2' is marked as static. You are not able to drag the widget, but by dragging around other widgets you can still cause it to move up and down. For example, move widget 1 below widgets 2 and 3, then without releasing move it back up just a little. Widget 2 (static) will move down and widget 3 will move up.

Let me know what your ideas on this are!

<style type="text/css">
body {
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
}

.container {
    width: 980px;
    margin: 0 auto;
}

.gridster ul li {
    background-color: lightblue;
    border: 1px solid black;
    list-style: none;
}

.gridster ul li p {
    margin: 0;
    font-size: 3em;
}
</style>
<link href="/Content/jquery.gridster.dustmoo.css" rel="stylesheet" />

<div class="wrapper">
    <div class="container">
        <div class="main">
            <div class="gridster">
                <ul>
                    <li data-row="1" data-col="1" data-sizex="16" data-sizey="1">
                        <p>1</p>
                    </li>
                    <li data-row="2" data-col="1" data-sizex="4" data-sizey="4" class="static">
                        <p>2</p>
                    </li>
                    <li data-row="2" data-col="5" data-sizex="12" data-sizey="4">
                        <p>3</p>
                    </li>
                    <li data-row="6" data-col="1" data-sizex="4" data-sizey="4">
                        <p>4</p>
                    </li>
                    <li data-row="6" data-col="5" data-sizex="4" data-sizey="4">
                        <p>5</p>
                    </li>
                    <li data-row="6" data-col="9" data-sizex="8" data-sizey="8">
                        <p>6</p>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</div>

<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/WidgetOrganization/jquery.gridster.dustmoo.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        gridster = $(".gridster ul").gridster({
            widget_margins: [5, 5],
            widget_base_dimensions: [50, 50],
            max_size_x: 16
        }).data('gridster');
    });
</script>

[dustmoo]

Sure thing! I'll test it and figure out what is happening. Thanks for the feedback! I'll get back to you A.S.A.P.

[dustmoo]

@awgreenarrow08 I have updated my master branch on my fork.

Static widgets are working.. kind of. I need to rework the functions that shift the widgets back up after they are shifted down.

But can't work on it any more today.

Unfortunately gridster was just not designed for this kind of flexibility, and many of their functions don't actually validate if a widget can move up, so sometimes we get overlap. (If I enable currently disabled code) Anyway, I will try to look at it some more Monday. Or over the weekend possibly.

Right now the library works best if you disable the shifting down:

gridster = $(".gridster ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [50, 50],
        max_size_x: 16,
        max_cols: 16,
        shift_larger_widgets_down: false
}).data('gridster');

Really, many parts of the library need to be refactored for better validation and position management. Gridster currently assumes that all widgets will move down, no matter what. Because of this, they never had to check if you could actually place the player where you were putting it. Gridster just places it and then moves everything down.

Anyway, I'll get there, just need more time.

Cheers!

[Regulus343]

Hey dustmoo, thanks a lot for building in the static widgets feature. It has saved me a lot of time and works exactly as expected!

[dustmoo]

@Regulus343 your welcome. :)

[ashestree]

Did anyone ever get this static widgets to work properly? This build all branches that i have checked still have the same issue where all static means is that it cannot be dragged but still gets moved by other widgets.

[dustmoo]

Static widgets are half working on my Branch.. you need to set it to stop sliding larger widgets down and it will work the way you expect.

On Mon, Aug 26, 2013 at 4:40 AM, ashestree notifications@github.com wrote:

Did anyone ever get this static widgets to work properly? This build all branches that i have checked still have the same issue where all static means is that it cannot be dragged but still gets moved by other widgets.

— Reply to this email directly or view it on GitHubhttps://github.com/ducksboard/gridster.js/issues/130#issuecomment-23257146 .

[ashestree]

Unfortunately even with that setting it seems to have a gravitational effect. Guess I will have to have a dig around and see what can be done. Just thought someone may have done it by now.

[dustmoo]

If you have an example of your setup I may be able to help. Also, I am meeting with someone else who wants to actively maintain my fork, (since I have been so neglectful), if you are interested in helping contribute you could probably join the webex we are having today to discuss the library, problems and what needs to be done.

Cheers!

Dustin

On Mon, Aug 26, 2013 at 8:38 AM, ashestree notifications@github.com wrote:

Unfortunately even with that setting it seems to have a gravitational effect. Guess I will have to have a dig around and see what can be done. Just thought someone may have done it by now.

— Reply to this email directly or view it on GitHubhttps://github.com/ducksboard/gridster.js/issues/130#issuecomment-23271838 .

[ashestree]

Hi Dustin,

Thanks for the offer but this is the first day I have come across this so I should probably have a look into it a bit before offering my opinion. Thanks for the offer though, but currently my only need is to have a grid where I can make blocks static on the fly and then they do not move at all, if all gravity can be turned off even better!

Ash.

From: Dustin Moore [mailto:notifications@github.com] Sent: 26 August 2013 19:44 To: ducksboard/gridster.js Cc: ashestree Subject: Re: [gridster.js] Make widget immovable (#130)

If you have an example of your setup I may be able to help. Also, I am meeting with someone else who wants to actively maintain my fork, (since I have been so neglectful), if you are interested in helping contribute you could probably join the webex we are having today to discuss the library, problems and what needs to be done.

Cheers!

Dustin

On Mon, Aug 26, 2013 at 8:38 AM, ashestree <notifications@github.com mailto:notifications@github.com > wrote:

Unfortunately even with that setting it seems to have a gravitational effect. Guess I will have to have a dig around and see what can be done. Just thought someone may have done it by now.

— Reply to this email directly or view it on GitHubhttps://github.com/ducksboard/gridster.js/issues/130#issuecomment-23271838 .

— Reply to this email directly or view it on GitHub https://github.com/ducksboard/gridster.js/issues/130#issuecomment-23272297 . https://github.com/notifications/beacon/gBg7U3GOOGidymrsfDfoqu6uldZ2z3BAcxd4dYRUKFTVk0aegZDpWyFY0TXpmtTz.gif

No virus found in this message. Checked by AVG - www.avg.com http://www.avg.com Version: 2012.0.2242 / Virus Database: 3211/6110 - Release Date: 08/26/13

[dustmoo]

If you can show me a sample and show your problem I should be able to help you disable the "gravity" entirely.

Thanks,

Dustin

On Mon, Aug 26, 2013 at 8:59 AM, ashestree notifications@github.com wrote:

Hi Dustin,

Thanks for the offer but this is the first day I have come across this so I should probably have a look into it a bit before offering my opinion. Thanks for the offer though, but currently my only need is to have a grid where I can make blocks static on the fly and then they do not move at all, if all gravity can be turned off even better!

Ash.

From: Dustin Moore [mailto:notifications@github.com] Sent: 26 August 2013 19:44 To: ducksboard/gridster.js Cc: ashestree Subject: Re: [gridster.js] Make widget immovable (#130)

If you have an example of your setup I may be able to help. Also, I am meeting with someone else who wants to actively maintain my fork, (since I have been so neglectful), if you are interested in helping contribute you could probably join the webex we are having today to discuss the library, problems and what needs to be done.

Cheers!

Dustin

On Mon, Aug 26, 2013 at 8:38 AM, ashestree <notifications@github.com<mailto: notifications@github.com> > wrote:

Unfortunately even with that setting it seems to have a gravitational effect. Guess I will have to have a dig around and see what can be done. Just thought someone may have done it by now.

— Reply to this email directly or view it on GitHub< https://github.com/ducksboard/gridster.js/issues/130#issuecomment-23271838>

.

— Reply to this email directly or view it on GitHub < https://github.com/ducksboard/gridster.js/issues/130#issuecomment-23272297> . < https://github.com/notifications/beacon/gBg7U3GOOGidymrsfDfoqu6uldZ2z3BAcxd4dYRUKFTVk0aegZDpWyFY0TXpmtTz.gif>

No virus found in this message. Checked by AVG - www.avg.com http://www.avg.com Version: 2012.0.2242 / Virus Database: 3211/6110 - Release Date: 08/26/13

— Reply to this email directly or view it on GitHubhttps://github.com/ducksboard/gridster.js/issues/130#issuecomment-23273718 .

[ashestree]

Hi Dustin,

As mentioned this is the first day I am looking at this and other than the stock sample included there is nothing else to show you. The only changes I made was making all the widgets the same height and width and then making a few of them static to see what effect it had. While you cannot drag the static blocks if you remove a block above the static one it slides to the top, therefore rendering it moveable by external factors.

Cheers,

Ash.

[aw3s0me]

Is there any updates about gravity thing here?

[piernik]

Any news on this one??