I'm using the REDIPS Drag and Drop JQuery PlugIN, that allows me to create draggable content that snaps to a defined table and its cells. However I need to change a bit in such a way that it allows me to drop an element anywhere in a cell, rather than just placing it by default at the end or the beginning.
So I still need to functionality where it "snaps content to a grid" but I need it to have any "left margin" within the dropped cell. Once the div is dropped in a cell i would like it get its left margin or offset from the parent cell.
Link to fiddle
var marginLeftAfterDrop = $("#" + divID).position.left;
I can see that you are using REDIPS for the draggable feature but I highly suggest to use the plugin made by Jquery through this link.
It is highly customizable and extendable according to your need. Moreover, it is highly supported by the community and plenty of developers are using it.
Related
I was trying to implement Drag and Drop in one of my project using HTML's default API. I have completed the implementation but now I am facing the issue that an extra area is also picked in the DraggedImage other than the element. I have attached the image here for reference. The area highlighted by the black pen is the extra one (the image is the element that I want to drag).
I have tried to search a lot, but didn't find any relevant resource for getting rid of this.
One method that I can think of is cloning the dragged element on drag start and deleting the cloned after drop. But I think this will not be ideal as the dragged element can be more complex.
I essentially need to have a user online click drag with the mouse or fingers on a picture of the human body to highlight the selected area red. Basically they're selecting areas of the body that hurt.
Then I need to store this information, and use it as needed.
Looking online I just seem to find how to highlight an area on hover like JQuery's maphighlight feature, which isn't what I want.
I'm very new to coding but am learning as I go along.
There are more pseudo-classes than hover. In this case, active or visited.
You could simply change the selected image section to a highlighted version of the same image.
Or add a border CSS property on :visited
To store information use either a made up data-[whatever] attribute,
or use a regular JavaScript variable. Since you'll need JavaScript to use the given variable anyways.
There are fancier solutions.
MAP is great for selecting shapes within an image, but doesn't have a way to highlight that selection.
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
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.
I'm doing a visual editor using HTML5 Drag and Drop and i need to drag an element set as draggable to a div who acts as a container.
Some browsers provides a kind of preview image that represents the element while i'm dragging it, and when i let the element in the container with the drop event, i need to get the position where the user wants to put him. The problem is that i don't know the position of the preview ghost provided by browsers, so i don't know where exactly the element should be positioned.
I used the mouse position but it's not what i wanted, because the mouse position is not ever the same as the preview's. Is there a way to get the current position of the preview of a dragging element?
Have you considered using jQuery UI to do your DnD? I'm not sure if you've considered that or not, but here are some resources that might help you in-case you do choose to do the jQuery UI route:
jQuery UI Draggable (also see Droppable)
jquery ui drag/drop getting position from multiple draggables