I'm using jQuery Isotope to lay out a list of file entries contained in an <ol> element. I would like to keep Isotope from moving several items at the beginning of this list, such as an item indicating a parent folder. If I sort those elements using Isotope, the "parent" entry will be moved around which is very annoying.
Is there any way to tell Isotope not to change an item's position apart from "tweaking" the sort rules to assign a special sort index to it? This is the way it works now, but I am looking for a cleaner solution.
If needed I can provide a simplified jsFiddle test case.
This question was asked quite some time ago, and maybe back then the functionality wasn't available.
I just stumbled upon it and wanted to add that there's a "stamp" functionality, that tells isotope to layout the items around the "stamped" element.
http://isotope.metafizzy.co/methods.html#stamp
Stamps elements in the layout. Isotope will lay out item elements
around stamped elements.
// jQuery
$grid.isotope( 'stamp', elements )
// vanilla JS
iso.stamp( elements )
Related
I'm trying to develop a control where one must be able to add elements, move and resize them. The idea is to draw small diagrams by dragging some elements to the dashboard. Here is what I'm trying to accomplish:
The dashboard must have fixed boundaries (left/right/bottom/top). Elements should collide with them and not go beyond.
Elements can be added with a button or dragged from a repository
Elements must be resizable
Elements should collide
Elements must be movable - freestyle, NOT adjust at the top like gridster or gridstack. I need to be able to put an element at the bottom or at the middle of the dashboard and have empty spaces.
I must be able to get all the necessary data from the elements in order to store and recreate the dashboard (save & load).
I started by creating this small test project using the drag & drop features, but soon got the feeling I was trying to reinvent the wheel and maybe doing it in an unnecssary old fashioned way.
But after a few searches, I still didn't find one plugin/control that behaves the way I need or is easy enough for me to change.
Gridster and gridstack make the elements go at the top.
TinyDraggable looks nice, but is not resizable. I did try to make the div elements .resizable() (adding the jQueryUI) but I wasn't able to make it work. This plugin does not have (I think) collisions, which would be OK if I managed to get everything else needed. I do like the freedom of movement of the draggable items compared to my tiny project where they go from slot to slot.
So, the question is: do you know if there is any suitable plugin (jQuery) for me? Ready to use or easy to configure/change?
Many thanks
Try https://github.com/troolee/gridstack.js with float mode. In this mode widgets do not go to the top of container.
The library is in active developing. So I can implement missing reasonable features.
If I used:
parentNode.removeChild( divHere );
It does work and the scroll bar for the overflow updates accordingly. If I use JS to 'divHere.style.visibily = "hidden";' well that doesn't work anymore. What I've done pretty much is create 115 divs that are in a container div and the user can select filters to show only the images they want, all the divs have a background image and are essentially just an image with a name under it.
So I have 2 questions:
1) Is there a way to update the overflow and make it not take hidden elements into consideration?
2) If 1) isn't possible than when I use removeChild to remove a div from the container, it does indeed disappear but what exactly happens to it? Does it disappear off the page because it's not added to any element on the page? So it essentially works like it's hidden? I don't have to worry about people seeing the images in some completely weird spot in some lesser used browser?
and well 3) If you have a better method of doing this it would be greatly appreciated
Thanks in advance for any help
The removeChild() method removes a specified child node of the specified element and returns the removed node as a Node object, or null if the node does not exist.
That null means that the element is now removed from your mark-up.
You should use it to not let the browser take that into consideration, as the browser will not find that element in the mark-up.
You can do it in this way as well:
$(document).remove(object_to_remove);
FInd more about it: http://api.jquery.com/remove/
I believe I may have a response for the third part of your question. That large number of divs in your containing div and the usage of filtering make me think you might want to look into using the DataTables plugin for jQuery (http://www.datatables.net/). It has some very nice features for sorting/filtering/etc. a large number of data elements and supports a variety of data sources. There are also some plugins for the plugin if the basic functionality isn't enough for you.
There is a bit of a learning curve if you want to do more complex stuff with it, and it might be tricky to get used to if you haven't worked with jQuery much (though being someone who hasn't worked with jQuery all that much due to not doing much web development, I can say that I quite like using it whenever I get the chance, although that may just be due to me enjoying learning how to do new things in programming), but I feel that if you're willing to spend the time on it you will have something much more maintainable than what you currently have.
This is currently just conseptual, but it bothers my brain.
If I have a list of items - in my mind it's a HTML/JS implementation, but that's just because I'm a visual thinker ;)
I want to use drag and drop to sort this list, with the aim of storing the new order when I'm done. Is there a way to do this without numbering the items, and then updating the number of the dropped item + every single item that follows it? Isn't that very inefficient?
As far as performance goes, changing the numbering of the elements is nothing next to actually rendering the transition (while you're dragging an element), so no, it's not inefficient.
You can use a doubly linked list in order to minmize the amount of operations needed to change the order of the collection.
I would recommend using a JavaScript framework to do the job.
KnockoutJS should fit your needs (from the website):
Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.
If you left gaps in the numbers, you could probably do it efficiently -- for instance, let the first element be 10, the second be 20, the third 30, etc. Then when you drag something in front of the second one and after the first, call it 15 (or something).
Rather than incrementing numbers every time, you'd only have to do it if you ran out of space. At the end, you could just order the objects by lowest number.
Not including any code here, because this is a conceptual question.
You have to have a number for every element in the list anyway, since they have to have a Total Ordering among themselves to be represented as a list.
If you don't expect the number of elements in the list to be large, a Bubble Sort should work very well for you.
I am thinking of using Masonry plugin in one of my projects. What I wonder about if it's possible some way to detect empty spaces that sometimes appear in the layout when divs are positioned. If I had a way to check such blank spaces, I could fill them with some generated divs with some data in them.
I would play with offset().left. For example:
Store a masonry item in variable "item"
Check if item.next().offset().left equals item.offset().left+item.outerWidth(true)
That will check if the item next to our starting item is actually there. Note that outerWidth(true) makes sure the margin between items is also counted.
Hope my theory makes sense to you,
Good luck.
So I have two sortable lists in a web app I'm writing. What I want to do is make one of the lists not be reorder-able, but allow it's items to be dragged onto the other list. Items from list one can be dropped on list two, but items on list one can't be rearranged.
Another thing I want to do is to make it so when items are dragged off of list one they're not removed from list one; the dragged item is only dragging a copy.
The end goal is to have a toolbox thing that allows the user to drag elements into a "canvas" of sorts. Elements in the toolbox aren't rearrangement and once they're dragged off the don't go away (so the user is just dragging copies).
Help with either disabling reordering or making copies dragged off would be much appreciated!
(I can post my list code if you guys need it)
Neve mind! I found the answer after browsing the docs more. The solution is to use plain draggable+sortable elements:
http://jqueryui.com/demos/draggable/#sortable