Is there a way to "activate" an entire DOM to be draggable and resizable using jQuery UI? I then want to save the user's new positions in HTML5's data attribute to recreate the page later.
Imagine this same page you're looking at to be "activated" when you just hover, click, drag, and resize all the visible elements around (snapping would be super nice!). Any advice or idea on this?
Making literally every div/span as drag and droppable is non-sensable. What we has humans easily observe as a atomic "unit" (like the 'javascript' tag box) is not so obvious internally in the HTML structure. So you may have to do some thinking and decide what you want included in "everything" that becomes Drag and droppable. And at that point, you can just name all those elements with a "dd" class and use that.
Like Thr4wn said, if you give each element that should move a class, then you can give each member of that class a function that updates its location when it changes. I suggest using 960.gs as a grid to remember locations.
This way you can each objects classes as html5 data.
It's pretty simple, just do this :
$('*').draggable();
Not really sure why you would want to do this.
if you really want to you could use the $("*") selector. but I would not suggest it...
Related
So I have table and menus, which I want to place near selected element.
For example, table slides down from one line and there is transition, so I can't instantly take relative offset and set it to menu. I should do it after transition is complete.
So, talking in abstract way, I should emit event about selection of element when table is fully displayed. Or I should display all table and then select element, so menu will know where to go.
The problem is: I dunno how to subscribe on transition end.
Yea, I can recalculate position of menu in $watch, but I don't feel like I need a new watcher here.
How it could be implemented on ReactJS, for example? I use angularjs, but the point is - I don't need to use two-way-binding here.
Any thoughts?
Btw: I can't rely on angular-animate since it requires classes to be used, but I have to play with css dynamic attributes instead. And no, it is not possible to rewrite it to use classes, yes I tried. It will not work by the possibilities of css.
Good day!
I have a page with a vertical menu off to the left and a box to the right of it. Currently I am able to drag a ghost of a menu item and let go of it. It doesn't actually drop anything, so there is no actual change to the menu. When I drop the ghost, it calls a method.
What I'd like to be able to do is to create an object with JQuery or plain javascript or whatever and instantiate it.
This object would have the following properties:
- Have its parent be the div box that its dropped on.
- Be contained by its parent, yet draggable within it.
- Have the ability to be a parent of another object of the same type when its dragged into it from the menu
- Have a title based on the menu item that it was dragged from
- Store whatever text values are assigned to it.
I'm not asking anyone to do this (although you can if you want), but I would love to know if its possible and if anyone can provide a link to some sample of an object or widget being built that can be assigned properties and events.
Thanks so much,
Carlos
http://jqueryui.com/sortable/
This is really by far your best option. I have seen others, but this does exactly what your are describing. Most of the time sortable does everything you want, but if it gets really complicated, say you want to have the item your currently on light up or not be easily contained in an option you can still use draggable and droppable to do w/e you want.
I found something that will work for me. Instead of reinventing the wheel, I will just modify the Jquery-UI's dialog widget. its alomst exactly what I need out of the box. There's an interesting article on it here: http://www.erichynds.com/jquery/tips-for-developing-jquery-ui-widgets/
Thanks much for the help, all.
I want to write a sortable list using jQuery.
My thought is as follows: As the li element moves with mouse, a placeholder will be placed dymatically where the li element will be placed when mouseup event happens.
But I don't get one thing: How to make the other li elements move up and down appropriately as the placeholder moves. I don't think I should use CSS 'top' property to move these elements as this method actually doesn't change the index of each element in the list automatically. Could someone give me some idea on this? Thanks.
Actually jQuery UI allows you to choose which parts of it you want in your script. So you can choose only sortable (it will have three other dependencies, but nothing particulary large). Just go to jQuery UI homepage and click build custom download. You can get a very lightweight script this way (which you can further strip down if you choose readable code in your download).
It helps your code cross-browser compatibility and jQuery UI code is actually readable and easy to strip down of any unnecessary functionality (you can probably remove for example scrollSensitivity setter).
I have some jQuery code that finds elements with the shaded CSS class and adds a div element after it. It is run in the document ready event handler.
$(".shaded").after("<div class='shader'></div>");
The shader class provides styling to make the above element look raised.
My problem is that we started using Ajax to populate content, so now I need to run the code above each time new content is retrieved using Ajax.
What I want to know is how I can detect if this dynamically added "shader" div has previously been added. I know I can find those next elements using this:
$(".shaded").next("div").hasClass("shader")
But how do I elegantly add the "shader" only to the elements that have not been shaded yet?
Thanks in advance.
$(".shaded + :not(.shader)").prev().after("<div class='shader'></div>");
works and tested
First of all, you should really solve this with CSS. But I can imagine situations where that is hard to do (*cough*IE6*cough*).
You could do it the nasty jQuery way and derive which elements already have a shader, like Mrchief's solution.
Or you take the responsible solution and keep a list of elements that have been shaded, and even better, a list of elements that still need to be shaded.
jQuery encourages you to 'abuse' your DOM for storing information about your model, while you really should just make a model and use jQuery based on the information in the model. This is exactly the reason why I'm no longer using jQuery for anything that doesn't involve very complex tasks (I still use it for animations and fancy plugins like lightboxes).
You can try something like this (untested though):
$(".shaded + :not('div.shader')").prev().after("<div class='shader'></div>");
It finds all divs with class shaded and filters out the ones that do not have a div with class .shader after them.
Thanks to #Joseph for pointing out the .prev()
I've been googling and trying this for a good while now, but comes nowhere. So here goes:
What I want to do is to drop text on a DIV tag and handle that with JavaScript. Something along these lines:
<script type="text/javascript">
function handleDrop(sender, args)
{
$('#theDiv').html(args.textfromdrop);
}
</script>
<div id="theDiv" ondrop="handleDrop()" />
<br/>
<p>
This is some simple text. Draggable?
</p>
So, on this page I want to be able to drag contents from the paragraph for example to the div and it would handle the drop and change it's appearance accordingly (Or maybe just display that text, as long as it would handle it!). I've been trying with jQuery, but it seems to be a whole other model, and I can't set all my potential draggables as such because they should be able to come from everywhere. Is this even possible?
EDIT: Please correct me if I'm wrong, but these droppables all require a draggable to be dropped at it, right? What I would want is that you can drop text, pure text, from a page that you don't have any control of. This might sound weird, but it's for a firefox extension where you can drag content from a page to another page that resides in the side bar.
I would recommend using an established Javascript Library such as jQuery or YUI.
Have you considered creating a hidden textarea (ie with css style visibility:hidden) overlapping the div in question? Then check for drops with the onchange JavaScript event, or if that doesn't work, periodically the textarea's value for non-empty strings. I'm guessing your mileage will vary depending on the browser and operating system.
Or if you prefer Prototype like I do: http://wiki.github.com/madrobby/scriptaculous/droppables
EDIT: Based on your revised question: No, there's no way to allow a user to drop text from one page to another page. Not unless you do decide to build a FireFox extension like you were saying. Even if you could find a way around the security issue where you cannot script a page that's not under the same domain, you can only drag and drop DOM elements within the window/iFrame they're in.
I have done this before and it CAN be done without any library with some effort.
I've built the following methods:
Method that tracks your mouse movements.
Method to read and pass the content when you drop.
Used onmousemove and onclick events for the drag and drop methods.
OnMouseOver for the div area where you'd like to drop the text - to detect whether the pointer is over the container (div) or not.
Finally after dropping the text I deleted the original content (if needed) using innerHTML so it looks like it has been moved.
You can pretty much achieve a Windows like drag and drop functionality with this. I used it for drag and drop images, icons, etc.
If you need help with the coding I can give you some guidance, but most of it you will find if you Google around a little, then all you need to do is make them work together.