I'm new with html5 and I'm trying to go through with drag and drop functionality.
This is the scenario: two different divs (or canvas) side by side.
What I want to do: drag the first div (or canvas) and drop on the second div.
Which result I expect: The first div content is now on the second div position and the second div content is on the first div position. Like a normal switch.
I'm pretty sure that is possible, but the only think I've done until now, was to append the first div into the second div.
Yes, of course it is possible, but the answer depends a bit on what the purpose is... If you want to learn how drag and drop works in HTML5, then write your own implementation based on the tutorial you mentioned. But if you want to build something for production within reasonable time, use a library - there are lots. Which one to use also depends on the platform you're targeting. If you're targeting mobile, you need touch support, and you need to consider multi-touch effects in your implementation - it's not just mouse clicks and drags anymore, but potentially lots of fingers simultaneously!
A nice demo using hammer.js can be found here: http://riagora.com/mobile/hammer/index2.html. Drag and Drop works both with mouse and touch, but you need a touch screen for zooming (by pinching) and rotation of images.
Another demo, a puzzle using scriptaculous, which does almost what you ask for. However, the current version, 1.9.0, is from December 23, 2010, so it doesn't seem to be actively developed anymore.
Related
I know there're some threads regarding the following issue but I didn't find anyone that suits me.
I'm trying to create a chrome extension that creates a dynamic table inside a div.
The div fills the whole window and the table is being position at the top right corner. Another important thing - the table is draggable. Till here all is good.
Unfortunately on some sites the tables ui looks a bit different due to css overwritten.
Most of the solutions suggest the use of iframe, now because of the drag-and-drop and that iframe consume all the mouse events I cannot use them.
Any other suggestion would be great!
So I have two leavers/divs that i want people to be able slide with iPad/Android on website. At the moment I have tried jQuery UIs slider + touch punch to make it (it's basically slider with two handles) but seems I cannot move two handles simultaneously. With one handle at a time it works great but yes, I would need to have it so you move both handles with two fingers same time.
Is there better way to do this then jQuery UI's slider? I don't really need to get any values or anything from it. Just visual stuff. Could touchmove be option? Can I move div using it?
EDIT. hmm, is it even possible? I think iPad for example takes it always as pinch?
I am using native HTML5 drag and drop for a simple game application where user needs to drag the images of animals and place in to the correct bays (domestic /wild). When I am dropping (appending) the dragged element to the bay, I want to animate it and make it appear as if the elements are flying and getting dropped in the bay.
I have tried fadeIn(), but it happens after the element has been appended. I need the animation between the dragstart and the drop. Thanks for your help.
For what you are trying to achieve html5 drag'n'drop functionality might not be the best for precise visual experience you are looking.
As default behaviour slightly differs in browsers and most annoying is 'move back animation' once dragged item is dropped.
I have no idea why developers behind Chrome did that stupid "feature" that even delays the dragend event, which is even worse thing..
So you would need to write your own drag'n'drop functionality with very precise visual functionality, but I would not recommend using html5 drag'n'drop for your particular case.
I'm looking for something like CATiledLayer (on iOS), but for use in PhoneGap/Sencha Touch 2.
The idea is to "stream" a very large image from a server in form of tiles - very much like Google Maps does the job.
It should support touch gestures on mobile devices so a user can pinch zoom and scroll.
Unfortunately I couldn't find something - so a few pointers are highly appreciated.
Update:
In the meanwhile I took a look at OpenLayers, which seems to what I want and manages multiple layers of zooming and such. Unfortunately it is hooked too much into Geospartial data and there is no way to disable projections to make it work like a basic image viewer.
I also found GSV (Big Ass Image Viewer) - unfortunately I doesn't support touch gestures and generally seems to be abandoned.
To me it's just weird that nobody really had the need for something like this and I try to prevent "re-inventing the wheel" as much as I can. But right now it does not look like there are any non-geodata/map related solutions.
I've never seen anything like this done using Sencha Touch 2, though I'm going to assume that putting something like this together wouldn't require much.
It would basically be your custom component (which would be scrollable). Inside that component you would insert 1 child which would be the size of your image (lets say; 15000px x 15000px) so it overflows. You would then listen to the scroll event on the parent container and when it gets to a certain x/y state, update the child item with that section of the image.
I'm not sure what the best solution for the child's HTML would be. Perhaps a bunch of divs, but I'm thinking <canvas> would be best for images.
I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.
Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.
If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.
Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.