I'm trying to make a 'favorite links page' where the sitemap is on the left, and you can drag your preferred links to the right. The items on the left that have been added to the list on the right are disabled, if the items on the right are drug back, their corresponding item on the left is enabled. I'm thinking I can use this: jqueryui.com/demos/sortable/#connect-lists and this: jqueryui.com/demos/sortable/#items but I haven't found any options that seem to fit this use case. Would I be better off just making something custom using droppable items (like this jqueryui.com/demos/droppable/#shopping-cart)? I'm just looking for some info here, because I don't want to head down a dead end. Thanks,
nu
found it: http://jqueryui.com/demos/draggable/#sortable
Related
I'm using GeoGebra Classic 5 and have a bigger project where I've encountered the problem that I can't find any way to change the order of elements in the list of the algebra view after the elements are created. Sure I could of course just delete the affected elements and create them in the right order but I'm sure there must be a better solution to such a simple problem.
Here you see what it looks like right now, and how I would like it to look
I've tried looking through the properties panel and all the navbar buttons but there seems to be no way to change the order of the list. The only thing I've found is the "sort by" setting that changes the order but doesn't let the user decide the order other than some predefined sortings. I also haven't been able to find anything about this on google or the geogebra documentation. Hope you can help
I'm trying to edit Daniel Buchner's sidebar library so that the sidebar shows up on the right hand side. Do I do something along the lines of the following?
sidebar.browser.style.MozBoxDirection = 'reverse';
Your approach doesn't work because you would need to change the direction of the sidebar's parent box, not its children. However, that would cause unnecessary fallout (like the default sidebar appearing on the right side and developer tools on the left). So it is better to solve the problem by changing this line:
document.getElementById('browser').insertBefore(clone, splitter);
Instead of inserting your sidebar on the left side you can use appendChild to add it to the end of the container. You will also have to add your own splitter however - you can clone the sidebar splitter and change its ID.
does any one know if there is an example available for sliding panels in jquery? If so, can someone send me a link? This is what I want to accomplish.
On my main screen I want to have three divisions. One right column that covers half the screen and then the left column divided in two rows. I want to expand and/or shrink the right column and/or left column and/or the top row in the left column and/or the bottom row in the left column.
Think og it as an IDE with the left side of the coding area and right side as project explorer and the properties. The coder would like to see any three of the sections at once or would like to expand each working area.
I am looking for a jquery solution for such!
Thanks
Sounds like the way jsfiddle.net works
This is available as a plugin. http://docs.jquery.com/UI/Resizable
You could also use the jQuery splitter plugin: http://www.methvin.com/splitter/
Also see (2011): http://jcubic.wordpress.com/2011/03/06/jquery-splitter-split-container/
Flexigrid is a new (2012) option: http://flexigrid.info/
The most robust solution for this is to use the jQuery layout plugin. You can find it here: http://layout.jquery-dev.net/
You can see the code on http://designvictim.com/jqueryui/index.html
I'm trying to make something similar to the widget drag and drop from
Wordpress.
I've gotten pretty close to what we wanted to accomplish but we wanted
to be able to when you drag a item out of the "Drop Area's" and drop
it outside then it would erase itself and send of course an Ajax call
with the updated contents. That is why i made the #body droppable.
Also if you start a drag from the Module Column to one of the drop
areas i wanted it to be sortable directly before dropping it and i was
able to accomplish this with "connectToSortable: '.moduleContainer' "
but now every time i start with an item from the module container and
start dragging and hover one of the drop areas and continue to another
one, the drop function of the $('#body').droppable() fires which
boggles my mind!
I hope its some clumsy coding of mine and not a bug of jqueryUI.
Thanks in advance for any help and i hope i made myself clear on the
problem.
Figure it out!
I made my .moduleContainer droppable and sortable and you shouldn't do that. Automatically when you make a group sortable it becomes droppable. I couldn't find this information anywhere in the jQuery UI documentation though.
I'm trying to setup a way to sort multiple items at the same time using jQuery UI's Sortable plugin. I have come up with a partial solution, where the checked items go with the drag, but I can't get them all to move positions. Here is what I have: http://jsbin.com/ecela
What do I need to add to ensure the items move to their new location and get removed when dragging starts.
Also, I'm wondering if there is a way to use selectable and sortable together. I'm guessing not because they both require you to click on the items to select and drag/sort them.
There's a jQuery plugin for that: multisortable.
They have a jsfiddle example there too. You select items with shift-click or command-click, then drag them around.
Seems like a good starting off point, at least!