Modifying (Draggable | jQuery UI) - javascript

you know this link?
http://jqueryui.com/draggable/
I think myself it's a good script. I wanted to modify it, so only top part is interactive, and could drag whole div, while rest won't be able to drag div. So here comes the come:
http://jsfiddle.net/fQ4us/
How to make it able to drag div with Drag me around text, but not with Some outside content text?

You want to make one of your div's a handle like in this example

Related

Animation take place during drag

I have an element that is draggable using jQuery UI's .draggable(), but I want it to follow a certain path while dragging.
In fact, while it is being dragged the whole layout of the page will be changing.
Since I have one set of styles for how the page looks like before the drag and one set of styles of how the page looks like after the drag is done, I figured using a CSS animation would make sense.
So, now, my question is how can I make that animation occur as the drag is happening?
Or if there is another way to do this then an animation, how can I transition from one style to another as a drag is happening.
What I'm trying to do is get the draggable element to drag into its place in the second styles.

html5 draggable - arbitrary drop position?

All the examples that I've seen with draggable elements have a specific destination where the draggable element can be dropped. Is it possible to drop the element anywhere on the screen without specifying the destinations?
I have a map (ThinkGeo) with some specific areas coming from the database. when the user clicks/touches those areas, I'm showing popups with description of those areas. The popup is nothing else than a div that I'm showing and hiding accordingly.
The user wants to be able to move around the popup div on the map. Is this even possible?
Certainly possible and pretty easy with jQuery UI:
$("#elementId").draggable();
And a shim for touch events:
http://touchpunch.furf.com/ which at 584 bytes, is pretty lightweight.

jquery drag image into text and show url of that image

I have a textbox, a div, and an image.
Do we have any way to do like this:
When I drag that image into the div. (The image don't need to move, just like we left click on it, and drag it to anywhere, but it never move.)
The div show the image. (Duplicated 1 image into the div)
The text show URL of that image.
Do you have any idea or article(s) on doing this thing?
I've never coded drag drop in my life, but I know Step 2 is just set HTML for the div, and Step 3 is just get image src. However, on Step 1, how do I know when "the image into the div and the mouse release?"
I know jQuery UI, it's not the dragable from jQuery UI, cause the draggable makes object move. I don't want it move. Can you try click on any image on this stackoverflow website, or any link. Then you hold your mouse and drag it. Try drag a link into the search box at top, and you get the link. Thats what I want. Not the dragable of jQuery UI to make the object move.
You can do all of this with the dragable feature in jQuery. I noticed in a comment you mentioned that you don't believe this will work because it actually moves the image but there are more than just the default options! Take a look at the clone helper attribute.
Here's about as close of an example as there is and it sounds like you already know how to handle the rest (getting the src attribute, etc.).
http://jqueryui.com/demos/droppable/#method-option
JQuery draggable allows you to leave the original in its place while dragging through the use of Helpers. See this url and try dragging the top grey boxes around. The two on the right use helpers, leaving the original in place.
http://www.jqueryui.com/demos/draggable/#visual-feedback
Using this in conjuntion with the link Artsemis provided will do the trick
Dragging an image into your address bar is a function of the web browser, not JS or the page you are viewing. You will want to use jquery draggable or something like it.

How do I allow the user to move an absolutely positioned div?

I am using jQuery to create a "dialog" that should show up in the center of the page on top of everything and should remain centered at all times unless the user moves it. It has a header area (like a title bar) and I would like the user to be able to click there and drag the dialog "window" around. It is an absolutely positioned div. What is the best way to do this?
EDIT: I failed to mention that I would like to do it without jQuery UI if it's not terribly difficult. But I will look into how jQuery UI does it though. I may end up using it.
Use jQuery UI's Drag (and drop) functions.
Something like this (in its simplest form):
$("#myDiv").draggable();
Check out jQuery UI Dialog, and Draggable.

2 questions about drag and drop with Javascript

I'm trying to be able to drag random highlighted text or images on a random page that is not written by me, thus I cannot simply wrap the text in a div and make it draggable.
Is there any way to get highlighted text or images on a random page, like say Yahoo, and drop it into a container that can recognize what was being dropped into it (like content and content-type) without it even being an explicitly declared draggable?
I've been playing with jQuery, but can't figure it out.
Any help would be greatly appreciated.
Regards,
David
Directly no, but I wonder if it's possible to copy element and then make it droppable?
Have you tried scriptaculous? There are some demos. It uses prototype rather than jquery though...

Categories