Can someone explain to me how you can make a div dragable when the div itself is created only after you clicked on a button that will add the div like a to do list ? i
MDN has good documentation on how this works in vanilla js. You could start with something like this: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API.
It's unclear exactly what you're asking, though. How exactly do you want this div to appear - rendered somewhere on the page after clicking the button, then later dragged, or immediately in a dragging state, or something else?
The drag/drop API will support both of what I described above, but getting each to work requires different approaches. Clarification here would help.
Related
I just noticed that if you drag anything on facebook, no matter it's a link, or image, or pure text, the update status part changes to a box saying Drag Links/Photos Here. I'm wondering how to implement this functionality? Or in other words, how to detect that the cursor is dragging and do any subsequent change of a particular element on the webpage?
Perhaps HTML5? The following links should help you understand how to implement drag and drop with html5. You might also want to check the second link which implements drag "anything".
http://www.sitepoint.com/html5-file-drag-and-drop/
http://html5demos.com/drag-anything
what you could do is in the drag function that Mike linked just add JavaScript to change what you want. something here might help.
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'm trying to implement some kind of very basic flow chart functionality in a div.
Basically I have some boxes which by default my be joined by a little AND bubble. If I click on the bubble it will change to an OR bubble which will result in the boxes (divs) splitting.
Not really to sure where to start on this any guidance much appreciated - eg links to something similar or advice in what to look into. I've attached a mockup to help explain what I mean.
Thanks as always SO
W
It should be pretty straightforward. Bind a click on the and/or button, which changes the CSS class of the lower box to a class which has a larger margin-top property and moves the background-position of the and/or image to show OR. You could use jQuery's toggle function for this, though I imagine you'll be storing the state in a separate data structure anyway.
Ok on meebo.com there is instant messages that when you click at the top you can move around i wanna make something like that?
So how do I make Movable forms in JS?
I recommend the jQuery UI plugin called Draggable.
You first need to create your form. Your form will most likely be a div (with solid color or image for the background). Within the div, you have all your form content. The div will also need to be position absolutely (i.e. style="position:absolute")
The JavaScript is fairly straight forward; however, I would personally use something like jQuery to do the work. I'm not sure how familiar with JavaScript you are, but even for an advanced user, using something like jQuery just makes sense. There is a library of tons of already built forms etc with great instructions on how to use them. Let me know if you need more info on how to use a library like jQuery (you can find it here:
http://jquery.com/
You can see all the plugins here:
http://plugins.jquery.com/ (look at 'windows and overlays' - lots of them!)
Click on one that looks interesting, and click on 'demonstration' to see if you like it. For example, the third link down - (mb)ConteinersPlus, a jQuery component for fully customizable and featured container layout (DIV box model) - would let you do this (with almost no work on your end)
http://pupunzi.com/ (this is the example link)
Obviously, if you want to learn how to script it by hand, let me know.
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.