![]() ![]() **As independent from jQuery and other libraries as possible.** In the latter case, all the items around and to the right of the moved item might have their position slightly altered. If this doesn’t work out and after swapping we still have collisions inside the grid, the entire grid will be recalculated, starting with the moved item fixed in its new position. First, an attempt to resolve them locally is made, meaning that the moved item tries to swap position with the overlapped item(s). After an item is placed in the desired position the collision mechanism kicks in and the items that have to move are arranged so that as few changes of position are needed.Ĭollisions can be solved in two ways. The grid system will not do any magic afterwards and start moving the item around to make it fit. When you drag an item to a new position, that item will be placed there and nowhere else. The principle can be described best as - no surprises for the user. It is what gives the feeling that it works as it should or as expected when you drag an item around. This is a fundamental part of GridList and one that is easily missed. When building this project we stuck to a few principles: While solving all of this, our library ended up having 5 times fewer lines of code than gridster.js. ![]() We consider that we nailed this part by implementing a well thought collision mechanism that is a step ahead of the basic () implemented by gridster.js and other similar libraries and by following a few principles that are discussed in depth later. This is a major point which is very difficult to figure out as it is something quite subjective. very good UX experience that would not frustrate users with large boards in which the order of the items was important. This allows us to compute grid positions on the server-side and run extremely fast tests with Node. responsive - as mentioned earlier, it had to work on all kind of displays - needed full height widgets for our timelines, a particular type of widget that occupies a full column in horizontal grids or a full row in vertical ones, a feature that gridster.js did not have - we wanted the grid logic to be a DOM-less library outside the jQuery plugin. We looked at making gridster.js work both vertically and horizontally but the code required too much effort and was too complex to approach. support of horizontal grids - gridster.js works vertically and our design is horizontal. Our requirements for the grid system were: We looked at existing grid systems and most closely at gridster.js, but all of them fell short and did not satisfy our requirements fully or would have required too much effort to adapt. In the end we decided to build our own library. We had two options, find and adapt an existing one or make our own. Given all of these it was clear that we needed to use a grid system that supported drag and drop. We are passionate about dashboards and went through a few iterations and versions of displaying data in a dashboard form to understand what makes a dashboard great. easy and intuitive to use - easy to customise and manage - responsive - meaning that it will look great no matter what screen it is shown on, a mobile phone or a big 4k display Ī dashboard is a way of visualising data that, if properly built, would tick all the boxes of our requirements. We needed a data visualisation tool that would be: We needed a way to make it easy to discover patterns and take action on them. It is critical to show the result of all the effort of collecting and analysing in an easy to comprehend way. Our strongest point is our data, this is what we do best, collect and analyse great volumes of data. The library is used in one of our flagship features we call and was developed with the needs of this project in mind. ![]() is a JS library for creating two-dimensional, resizable and responsive lists that we built to help create highly customisable dashboards. GridList - building responsive dashboards with resizable widgets ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |