How to constrain movement when using HTML5 native drag and drop? - javascript

Various JavaScript libraries, such as jQuery UI, offer drag-and-drop interactions where you can constrain the movement of the dragged element to a single axis, or within a particular area.
Is this sort of thing possible using the native HTML5 drag and drop API?

It's totally different!
The jQuery UI drag and drop make element move (with top and left CSS properties) in the page.
The native HTML5 drag and drop API only allow you to move a "ghost" of the draggable element (of course, you can hide the original element while dragging the ghost).
The API come with a lot of event but no, you can't constrain mouse position so you can't constrain to a single axis (cause the ghost follow the mouse position, even if the mouse leave the page (but event may probably stop operate)).

Related

How to get the position of the preview of a draggable element when it's dropped in HTML5 DnD

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

HTML5 svg drag and drop - how to?

I'm trying to create a framework for HTML5-based adventure/point and click games, and I want to start with creating a way of dragging objects (from screen to hotspots or inventory, from inventory to hotspots, etc.), with svg representing both objects and hotspots (ie. completely transparent shapes there to detect hits). The idea is to drag the item, and allow it to drop only if the mouse is touching the hotspot.
I've run into some problems. Firstly, assigning a draggable attribute to <svg> or the testing circle didn't work. I tried putting it in a <div>, but while the drag event did register and fire, the ghost image didn't show like in the html5rocks demos. How can I fix the dragging?
Here's the fiddle.

How can I prevent ap elements with drag function from overlapping?

I'm creating a slider puzzle, I've got each section of the image in it's own ap div, each with the same z-index. I've restricted the drag movement to within the confines of the puzzle, but the ap divs are overlapping when I drag them. I was hoping the same z-index would prevent them from overlapping, but when I drag, they overlap. How can I prevent them from overlapping? I'm using HTML, CSS, and JavaScript. Any thoughts?
No, there is no way to prevent them from overlapping using the standard drag-and-drop facilities found in popular libraries like Dojo or jQuery. They're supposed to overlap; it's supposed to allow you to drop. At best, these libraries support borders you cannot cross, a bounding box for the drag operation. For your code, which sounds more complex, you will need to examine the bounding box code, write your own collision detection code for all the objects in your game's region, and incorporate that into the drag operation.
Setting the z-index has no effect on this. Browsers automagically adjust the z-index (often fractionally) to allow overlapping when needed.
Hello Heather body..
Please look at these websites,
<http://www.webreference.com/authoring/style/sheets/page_structuring2/>
<http://www.cs.txstate.edu/~rs01/1308/lectures/week5/5-1.htm>

Is there any HTML CSS or JavaScript click through property?

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.

How to emulate this javascript functionality (movable div and saved positions)

I have seen a feature on a site I would like to emulate. I have intermediate php skill but am a novice javascript user. The feature is the site content displayed in divs which can be moved around on the screen and their position saved using cookies. This site: [url]www.nowgamer.com[/url] is where I saw it (latest podcasts, videos, reviews etc with filter)
How would I go about achieving this through javscript? I want to know how to connect javascript with the cookie so that the positions of the square divs are saved, as are the preferences of the content filter on each div. How can I achieve this?
Would this be a big job? Thank you for any help, I am working independently on this in my spare time so your contribution with advice is my lifeline.
As Zoidberg commented, its easy with JQuery or Yui, or any other javascript library that provides drag & drop functionality. They are almost easy to configure, checking at demo they give. They also expose certain events like beforeDrag, afterDrag, onDrop, etc. where you can fire a simple js function check the elements' dropped position store it in cookies. For setting cookies, there are world of code on internet.
Also, you might want to check floating absolute/relative positioning css, if your DOM divs are going to be floating around the page.
GoodLuck.
simplyharsh has the proper answer, but I'd like to expand on it a bit:
The basics of a draggable div aren't too complicated. You attach an onclick handler to initiate the dragging. Internally, that's accomplished by changing the div's CSS so it's position: absolute. Then you start monitoring mouse movements (basically onmousemove) and changing the div's top and left according to the movements you've captured.
Dropping is a bit more complicated. You can always just release the mouse and leave the div wherever you ended up moving it, but that leaves it absolutely positioned and therefore outside of normal document flow. But dropping it "inside" some other element means a lot of prep work.
Because of how mouseover/mouseout/mouseenter events work, they WON'T work while you're dragging an element - you've got your draggable div under the mouse at all times, so there's no mouseenter/leave events being fired on the rest of the page. jquery/mootools and the like work around it letting you specify drop zones. The locations/sizes of these zones are precalculated and as you're dragging. Then, as you're dragging, the dragged object's position is compared to these precalculated drop zone locations for every move event. If you "enter" one of those zones, then internally the libraries fire their mouseenter/mouseleave/mouseover events to simulate an actual mouseenter/leave/over event having occured.
If you drop inside a zone, the div gets attached as a child of that zone. If you drop outside, then it will usually "snap back" to where it was when you initiated the drag.
Resizing is somewhat similar, except you're adjusting height and width instead of top and left.

Categories