new here (new account. Been here for ages though)
I have a problem where when I try and use the html5 drag and drop. It duplicates the item when I drop the element and keeps the original element at its original location. But if I drag the original again to the copy, it puts the element inside the copy. Why? and How would I fix this? If you need to see the code I'm using, it's literally the default HTML5 drag and drop from w3.
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'm implementing a drag and drop system in JavaScript. It works great but I have noticed that, sometimes, multiple items get dragged and dropped (see picture below). Is there any way I can prevent this from happening and constrain it so only one item can be dragged and dropped at a time?
I'm using Raphael to render some text.
I would like to be able to click and drag this text into a different container... for instance... the address bar... using IE7.
Ultimately i'll be adding my own data to the dataTransfer object, but just getting it draggable would be a start.
Preference would be to achieve this before insanity robs me blind.
here's a Fiddle - it's embedded because jsf doesnt work in IE7 mode.
many thanks.
some code to satisfy SO im code!
for what it's worth - my workaround was to remove the Raphael rendered text and replace with stock HTML and move it manually, this gave me the drag and drop I wanted.
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
For example on a drag and drop scenario.. I would love to be able to use the onmouseover of the thing we are dragging to, but unfortunately, the design calls for a ghost (copy of what is being dragged) which will surround the area of the mouse pointer. So the cursor is moused over the ghost the whole time.
Are you able to use jQuery? If so, I would look into jQuery UI to handle both your drag and drop events. Since you can make a ghost copy of what you are dragging without disrupting where you drop it.
Visual feedback for drag allowing you to show a fake ghost copy.
- http://jqueryui.com/demos/draggable/#visual-feedback
Visual feedback for when you hover over the droppable area.
- http://jqueryui.com/demos/droppable/#visual-feedback
For Firefox 3.6+, Chrome and Safari, you can use pointer-events: none;
jsfiddle.net Example
Original Post from pixelastic.com
When one HTML element is over another one (like when positioning an
element using position:absolute), you usually can't click through the
top element to access the bottom element.
That's used as a common
technique to prevent the right click on images by some sites (like
Flickr). They just add an empty transparent div over their images to
prevent the lambda user from right clicking and saving the image.
Sometimes, when integrating complex designs, you need those additional
layers, but you also want the user to be able to click through them,
as if they weren't there.
Just use the pointer-events:none css
property to allow click events to go through the element.
This is only
supported by Firefox 3.6+, Chrome and Safari for now.