ksylvest / jquery-gridly Goto Github PK
View Code? Open in Web Editor NEWGridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grid.
Home Page: http://ksylvest.github.io/jquery-gridly/
License: MIT License
Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grid.
Home Page: http://ksylvest.github.io/jquery-gridly/
License: MIT License
All I see on jquery-gridly is the drag&drop feature but nothing on re-seizing? How does the re-sizing work and where I can find the implementation?
Hi,
Even after reordering items using drag and drop, the DIV tags of items are in the same order as were created, as the items use Absolute position to rearrange.
Is there any way to programmatically get the order of items from say left to right in the grid ?
On iPad and iPhone can't tap on the demo bricks to make them two times size.
How can we change gridly settings after initialization?
For now I have created an override:
Gridly.prototype.refresh = function(params) {
if (params.length === 1) {
$.extend(this.settings, params[0]);
} else if (params.length === 2) {
this.settings[params[0]] = params[1];
}
var b = this.settings.base;
this.$('> *').width(b).data('width', b).height(b).data('height', b);
return this.layout();
};
Then my code looks like this
// base settings
var brickWidth = 250;
var gutter = 10;
// get initial gridly settings
var gridly = $.extend(true, {}, getGridlySettings(), {
callbacks: {
reordered: reorderImages
}
});
// dynamically resize images
$('.gridly .brick').width(gridly.base).height(gridly.base);
// initialize gridly
$('.gridly').gridly(gridly);
// refresh gridly
function refreshGridly() {
$('.gridly').gridly('refresh', getGridlySettings()); // <====== HERE
}
// get calculated gridly settings
function getGridlySettings() {
var gridWidth = $('.gridly').width();
var columns = Math.round(gridWidth / (brickWidth + gutter));
var base = Math.round((gridWidth - (gutter * columns)) / columns);
return {
base: base,
gutter: gutter,
columns: columns
};
}
$(window).resize(function(){
// buffer execution by 50ms
// this way we dont do multiple resizes
// if user keeps resizing browser window
clearTimeout(timeout);
timeout = setTimeout(refreshGridly, 50);
});
'Suppose I have two div's with grildy class set to them. On dragging and dropping an inner div in the first div, the same move drag and drop is to be replicated in the second div. Can you please help with this kevin ?
Hi, is there a way to have 2 grids, one which can only be ordered vertically? Something like:
ABBBB
ABBBB
ABBBB
0BBBB
0BBBB
Where A can only be reordered vertically, B is a normal gridly, and 0 is empty space that isn't to be filled with anything, which is ok, i can just put the BBBB sections with a margin-left spacer.
Please halp!
Hello,
first of all, thank you for this awesome plugin!
So, when i remove a brick from my grid, which method i could call to get the new number of elements in my grid?
Because, when i call:
$('.gridly').gridly('draggingEnded'); // Forcing call the reordered callback
the callback is called passing the old elements, with the element i removed before.
Anything i can do?
http://qianduanblog.com/post/jquery-plugin-13-jquery-drop-drag-release-sorting-replacement.html
Like this article write, I want the 2.2 insert into a new place, but it is 2.3(exchange places) sometimes.
And I test it only occure on chrome, it is well in IE
Anyway to connect multiply gridlys on a page so we can drop elements between them like ShapeShift.js (which isnt' supported anymore and has bugs)
Thanks,
J
site: www.reimaging.co
been using gridly to build a project site and everything was fine until hosting time. jquery seems to be working fine (another plugin functions) though gridly is nonresponsive?
any assistance or pointers would be super helpful!
Hi!
I am experiencing this issue, the reordered callback is called simply with clicking in a brick, is this possible?
/* gridly init */
$('.gridly').gridly({
base: 170,
gutter: 9,
columns: 3,
callbacks: {
reordered: reordered,
reordering: reordering
}
});
/* callbacks */
var reordered = function($elements) {
console.log("Reordenados...");
};
var reordering = function($elements) {
console.log("Reordenando...");
};
Is there any way to know when the order of the bricks is really changed (using a boolean value or another) to perform some action or not?
Cheers!
tapping works, but drag and drop fails on ipad safari and firefox on android. haven't tested with others.
Hi!
I don't know if this behavior is related to a bug, steps to reproducing the issue (using the built-in sample):
$(document).on("click", ".gridly .delete", function(event) {
var $this;
event.preventDefault();
event.stopPropagation();
$this = $(this);
$this.closest('.brick').remove();
$('.gridly').gridly('layout');
$('.gridly .brick').each(function(){
console.log($(this).data('position'));
});
});
<p class='actions'>
<a class='add button' href='#'>Add</a>
<a class='positions button' href='#'>See positions</a>
</p>
and the event listener for that button (sample.js)
$(document).on("click", ".positions", function(event) {
event.preventDefault();
event.stopPropagation();
$('.gridly').gridly();
$('.gridly .brick').each(function(){
console.log($(this).data('position'));
});
});
0 sample.js:49
1 sample.js:49
2 sample.js:49
3 sample.js:49
4 sample.js:49
5 sample.js:49
6 sample.js:49
7 sample.js:49
8 sample.js:49
9 sample.js:49
10 sample.js:49
11 sample.js:49
12 sample.js:49
13 sample.js:49
14 sample.js:49
15 sample.js:49
16 sample.js:49
17 sample.js:49
18 sample.js:49
19 sample.js:49
1 sample.js:49
2 sample.js:49
3 sample.js:49
4 sample.js:49
5 sample.js:49
6 sample.js:49
7 sample.js:49
8 sample.js:49
9 sample.js:49
10 sample.js:49
11 sample.js:49
12 sample.js:49
13 sample.js:49
14 sample.js:49
15 sample.js:49
16 sample.js:49
17 sample.js:49
18 sample.js:49
19 sample.js:49
1 sample.js:49
2 sample.js:49
3 sample.js:49
4 sample.js:49
5 sample.js:49
6 sample.js:49
7 sample.js:49
8 sample.js:49
9 sample.js:49
10 sample.js:49
11 sample.js:49
12 sample.js:49
13 sample.js:49
14 sample.js:49
15 sample.js:49
16 sample.js:49
17 sample.js:49
18 sample.js:49
19 sample.js:49
undefined sample.js:49
Gridly does not re-index the positions inmediately but if you try to move or click in a brick then gridly re-index the element positions, is this in effect, a bug?
Cheers!
I see the resize is done by click on the element.
Could you create a way to resize by dragging the edges of an element?
For example, if you have a Bootstrap grid (12 columns):
Drag the edge of an item, and snap it to col-1, col-2, up to col-12.
I have added input text and other form elements. But its not click able. Please let me know how to solve the issu.
Is it possible to apply this code in a one 100% div ? I need to create a dragging 100% div, something like this: http://www.mcdonalds.co.uk/ukhome/promotions/favourites.html
thank you so much!
Is it possible to have a custom drag handle?
I've seen I can pass a selector:
$('.gridly').gridly({
base: 40, // px
gutter: 20, // px,
draggable: {
selector: '> *'
},
callbacks: {
reordered: function($elements) {
console.log($elements);
}
}
});
Passing selector > .drag
does not work....I thought it would....
Here is a codepen: http://codepen.io/Flukey/pen/azYXZM
I want to be able to only drag the element when I click on the move icon.
Any ideas?
Thanks!
When I put columns: 3 I only get one column, when I put columns 10 I get 3 column.
How do I get the columns to work? Is this all a matter of pixel widths? In the given example columns is set to 12 yet even then the bricks drop to a new line after 6 or so.
Hi,
I would like if this lib will working with jQuery 1.7.1 ?
If not, do you have some recommandations ?
Regards,
Usually the reordering is linear (eg. the list slides backwards to fill holes), but after playing around with it a bit occasionally a block will slide down, changing the implicit order of the bricks. IDK if this is a bug or not, but it would be nice if gridly supported keeping their implicit order and/or had a little api from moving a brick from eg (0,0) to (5,4), though looking at your impl obviously you would have to track that state somewhere else. Or in this case, would you prefer users to modify the positioning of elements themselves?
hey is it possible to make gridly responsive??
I would like to access the element that was reordered it in the reordered callback. Currently it seems to only give me all the elements. Is this possible currently?
Does anyone have thoughts on being able to call gridly to update asynchronously?
See my video here:
https://www.youtube.com/watch?v=1DHcT4hNp4I
I'm using Gridly for the cards, but when the card opens I'd like to asynchronously call the update using the step method of jQuery's .slideDown (found here: http://api.jquery.com/slidedown/#slideDown-options ). See the code below for an illustration of this.
See how the card slides down, and then gridly updates the dom? I'd like to do that asynchronously. The step function would be called after jQuery calculates its element's position, and then Gridly would have to calculate where all its elements go just then. I already tried this with the way that Gridly is implemented now, but it did not work.
I'm motivated to implement this myself, but it would be appreciated if anyone can give me an idea of where to start in the code (like a description of how the element's positions are calculated). And if anyone has any ideas of exactly how to implement this it would be appreciated.
Here's sample code for how I'm updating the dom:
$.fn.expand = function($listItem) {
var $subAccordion = $listItem.next('.list-item');
$subAccordion.slideDown({
duration: 350,
queue: false,
step: function() {
$('.gridly').gridly();
}
});
};
Sorry, n00b question, non-coder, but jquery and its plugin(s)/authors get me a long way mostly, as jquery sorta makes JS something usable for an alpha guy (with some time). As such, when searching for something like this, highly prefer simple setup/eyecandy of Gridly as compared to Wookmark (no eyecandy, still good), and Masonry/Isotope/packery (overkill on options/complexity, too much unneeded things).
Anyway, I wanna use Gridly for a design where I load long chunks of texts from external pages on click/expand (mine). Got that working, .load and .empty, one '.brick' open only, differing width/height, skinned the boxes with (css) images even, all perfect including transitions.
And then I want to fire jScrollpane inside the '.brick' after Gridly finishes. Toying around with jQuery api to see if I can hook in anyhow (prolly can, but so far I spend 8 hours on it (non-coder, remember :p)), but it seems I'm missing what is called a callback (?), I in other cases could use to hook jScrollpane into other plugins (used before with some, it also rocks)? Just one, when done, do this, that would be the bomb.
Might be an ignorant question/request, if so, delete/close etc. Gridly is awesome anyway. Greetings, Luuc.
Hi
(this is in reference to issue #57 )
The gridly for the vertical section doesn't work when the second grid is called; what happens is that the first gridly (vertical) doesn't snap to the desired sections when dragged. Instead they move pixel by pixel.
The other grid works fine. Both gridlys are instanciated separately, with different classes.
function setUpGridly(){
$(".gridlya.vertical").gridly({
base: 600, // px
gutter: 20, // px
columns: 3
});
$(".gridly.itemsgrid").gridly({
base: 60, // px
gutter: 20, // px
columns: 9
});
}
The divs are built this way:
<div class="gridlya vertical">
<?php
for($i=0; $i<$numMainItems; $i++){
$basic = retrieve_big_data('#'.$i);
echo "
<div class='brick large'>
{$basic->{'imagelink'}}
{$basic->{'html'}}
</div>
";
}
?>
</div>
Where retrieve_big_data
is an ajax call returning an image link which is like this:
<img src="http://placehold.it/300?text='number_of_image_in_loop_as_text" />
and the resulting div block, which is like this:
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla</div>
Any advice or any more details you want to know? Really appreciate any details or ideas you have..
How can I get the same list, that is posted by the reordered callback by calling gridly directly?
example: gridly("$sorted")
I tried all methods like $sorted, layout,... but it does not work.
thanks
I have a gridly-aware block that is divided into three parts, the draggable/clickable portion, and the resize and the edit portion.
What I want to know is how to duplicate the functionality of the demo where a click resizes and grid re-calculates. At the moment, on clicking the resize portion, I add the class "large" and sure enough the block resizes, but there is no subsequent adjustment by the other blocks.
I tried simulating a click (although this is not ideal, since a click would navigate the user to the href) and I also tried calling gridly() on the grid wrapper.
Hi, is possible make a function for get the ordered list? I tried with "reordered" callback , but if the user doesn't touch the bricks, this callback is never called...
Hi!
This is my brick (imagen) css class
.imagen {
background: #EEE;
width: 170px;
height: 170px;
overflow: hidden;
border-radius: 4px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.055);
}
without border gridly calculates the right left and top position
but if the css class has "border" gridly cant calculate the left and top position
.imagen {
background: #EEE;
width: 170px;
height: 170px;
overflow: hidden;
border: 1px solid;
border-radius: 4px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.055);
}
Any help would be appreciated.
Hello,
can you please guide me disable and enable drag n drop...
kindly help me...
I insert dom into gridly dom and call method gridly
, but it did not trigger callback.How do I deal with it?
BTW, can I change some grid's position with code?
Hello,
Very first thank you for awesome plugin. How can I find each item's position after I dragging & dropping items?
Hi Thanks for the great plugin ,
Currently the grid items reorder row wise that is when i select an item in first row and put in second row
the reorder is row wise ,can any one suggest how can i have the reorder to happen column wise
The delete event in the item doesn't work in Chrome, even the demo.
because some developers doesn't want to use bower for the only one module :[
similar to Issue #8 but can we drag from 1 grid to another?
when i click add more buttons new divs are created with an additional class i included named addons.i would like to make this divs whose class is addons to be not draggable i used
$('.addons').gridly('draggable', 'off'); // Will disable dragging.
but its not working for me
please help me as soon as possible
Hello. Firstly, I love this script - looks great. I was wondering if it was possible to stop the grid resetting back to original size and block positions?
Is this possible with JQuery Cookies? Or is this similar to callbacks, in some way? Any help would be greatly appreciated.
Thanks!
is it possible to drag and drop between different containers ?
I can't find a way to remove the reordered callback to prevent items from being moved.
Sorry, forgot to check the closed issues, found it: #5
Could you kindly describe these three parameters or provide a link to any documentation? Thank you.
Hi,
I would like to disable the centre square in this grid to leave 8 'bricks' around the outside. No brick should be draggable to the centre but reordering should be possible. Can you suggest an approach for this using your plugin?
http://lukemtest-83776.euw1.nitrousbox.com/
Also, can you clarify the base and columns parameters? Why do I have three columns with the columns param set to 12?
Thanks,
Hi,
This is a great plugin! I'm going to use it as part of the image upload process of my site so that users can easily dictate the order that images are displayed.
In this use case, I've noticed different behaviour when the drag event is triggered by a child element rather the parent "brick" div. Initating the drag on the parent div works fine but if initiated from a child element (such as an img) the other "brick" divs don't always move around as you drag.
This same behaviour can be seen on your demo page. Starting a drag by clicking on the coloured blocks work fine. However, starting the drag by clicking on the "x" allows you to move the brick around but the other bricks rarely reorder themselves to accommodate the current mouse position.
This happens for me in the latest versions of Firefox and IE (haven't tested chrome).
Hi,
I found your plugin and found it great but I need to have only the header of my div who can allow drag and not the all div.
Anyway to do this ?
I try to set draggable.selector with css class but not all div was dragged :( only the css class
Thanks
Hi, it's possible to add responsive calculation of culumn for your plugin ?
Now, you should set number of column manually and the size is very different on mobile, tablet and monitor.
Thanks
Hi , i have added support for brick selection and calling reordering method for both reordering and select brick event. Allow me commit my changes.
Thanks to your wonderful plugin. I came across a strange issue with Gridly plugin. If we use the "gridly" function more than 1 grid group in a single page, only the first grid group have gridly effect.
I have set it on jsFiddle
http://jsfiddle.net/sreejeshts/Pw3Zq/4/
Refer the attached image for source code I used
When I removed Gridly from #grid-1 , second group(#grid-2) starts working. ie only one grid group is possible per page
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.