Hoping someone can help me find a good mobile web solution for handling the UI for something along the lines of picking horses in a race to "win", "place" or "show".
I'd like users to be presented with a relatively short list of, say, horse names w/small picture and then be able to drag them into one of 3 drop zones (each of which accepts one and only one name). Server should then be told the ID of the horse in each drop zone. Ideally names would animate into drop zone if dropped near it, but snapping ok too.
Rails back-end but that shouldn't really matter.
Needs to work with mobile screens (touch drag & drop)...and ideally standard browsers as well,. JQuery UI and JQuery Mobile get close with their "sortable" demos. But that appears to be directed for re-organizing a list. I need help creating "drop zones" and submitting contents of each back to server.
Ideas? Perhaps someone has seen some sample code along these lines?
Similar stack overflow question :
I'd check out this stack overflow question if you haven't already. Javascript Drag and drop for touch devices
1st Alternative:
There is this JQuery UI Drag drop and sortables blog by simon battersby
2nd Alternative:
There is JQUery mobile drag and drop by Steve Fenton
3rd Alternative:
I'd try sencha touch. It might be more than what you are looking for, but it is a great mobile js framework that should have what you need.
http://www.sencha.com/forum/showthread.php?102154-Drag-drop-sort-in-Touch&p=659116#post659116
Related
We currently have an interactive pdf book with hotspots for students teaching them social science. It loads the following data all made with Flash in pop-ups once a hotspot is clicked in the pdf:
Bar Graphs that grows on loading popup
Titles that load on click like you can do in PowerPoint. One title below the other. So each click loads another title
Drag and drop answering of questions - Preferably option to drag answer to question and make it bounce when incorrect.
Videos
We would like all of it to be made with HTML5, but we are not certain we can do all this and make it as good as it is made in Flash now.
Let's focus on one item I need to get running with HTML5
Drag and drop Q & A
Drag and drop answering of questions does not seem to exist according to (jQuery plugin to) drag & drop answers in multiple choice quiz . Drag and drop of course does, but perhaps there is more code out there that I can use to drag an answer to the question and get a confirmation that the answer is correct?
Update
Moodle does use drag and drop matching for 2 years or so, so it is possible: https://moodle.org/mod/forum/discuss.php?d=165923 Will need to see if I can refactor their code for WordPress or standalone use.
Has anyone experience with this? Is it possible to make this script or another script make a dragged answer bounce when it is dragged to the wrong box or area?
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.
I'm currently experimenting with HTML5 Drag and Drop API. Now I've got several questions:
1.
Am I right, that it's not possible to connect draggable elements with drop-areas?
Example: You have 2 different kinds of elements you want to be able to drag and drop: Files and Text-Labels. Now if I give some div an DragOver-Handler and a Drop-Handler it will respond to both, files and text-labels. I'm looking for a simple possibility to only respond to a specific type of draggable items.
A connected problem is the dropEffect cursor-style: At the moment I enable all possible drop-targets in the DragStart-Handler and disable all of them in the DragEnd-Handler (with "disable" I mean, that I remove all DragOver- and Drop-Handlers). If I wouldn't do so, it'll look like if you could drop a file on an element that should only react to text-labels.
2.
The dropEffect cursor-style is a mess. In Firefox I don't get them at all, in Chrome it will give me a big "plus"-icon (even if I have removed the DragOver- and Drop-Handlers from an element)
3.
Last feature I am looking for is multi-select: Select multiple Text-Labels and then drag all of them at a time. Is this possible? My first idea was to create a new div and move all selected elements inside this div and then drag the newly created div. Seems pretty hackish and looks quite ugly ;-)
I hope you guys have some answers for me. Thanks!
I don't think that HTML5 drag and drop (and friends) are supposed to be replacements for commonly used "drag and drop" Javascript libraries (although it COULD be used instead of them in some cases). The name is misleading.
Modern operating systems include APIs that allow cross-application communication: clipboard and drag-and-drop. Both APIs are quite similar and need to be quite low-level because of specific challenges:
the data must be sent across processes, so it must be somehow serialized,
the sender must have a way way of offering the data in many formats (eg. text/plain and text/html) and the receiver the ability to pick one that it likes best,
the sender and receiver may live in different processes, so they can never find out about each other (they might even be entities coming from different platforms, GUI frameworks, programming languages etc.), the only channel of communication is the data itself,
Current HTML5 APIS, as opposed to - say - JQueryUI draggables - are not meant to give programmer strict control of the look and feel of the dragging process, but rather enable tight integration with the native, system-wide mechanisms. Which may or may not be what the programmer needs.
So to answer the questions:
you cannot "connect draggable elements with drop-areas", because your draggable elements can even come from outside the browser. But you can make an area that rejects certain types of data (which is what user expects from native drag and drop).
"div" and "multiselect" are not things that operating system understands (we don't have native multi-cliboards or multiple-text-selections). You CAN implement such functionality if you make a with inner divs that can be toggled (eg. by clicking while holding shift). When someone tries to drag the outer dive, make a transfer object that says which inner divs were selected (you could even create an image that shows them).
If the above solutions sound a bit low-level, well - that's because they are. When you develop a desktop game or tool, you do not rely on native drag and drop for moving pieces across the chessboard or moving sliders in the GUI. I think it will be the same with JavaScript. JQueryUI Draggables are not going anywhere.
I discovered the new css controlling scrolling and snapping on http://msdn.microsoft.com/en-us/library/windows/apps/hh466066.aspx
I wonder if there's a tutorial or sample out there explaining how this works and to use those css-attributes.
I'm working on a (angularjs based) calendar and I wonder if it's possible to extend it using css to support touch panning trough the months (like win8 calendar navigating with the fingers).
http://jsfiddle.net/johnnayweiler/FyrtQ/
How to use like -ms-scroll-snap to make the view go with the finger, then snap to the next page? What js events would be recommended to know when the scroll amount reached this snap point(to load the next month).
Also of course, is there something similar in other browsers(this doesnt seem to be a standarts feature)? Probably using javascript, are there some simple solutions for handling momentum and snap?
Thanks for your ideas :)
Theres now an official sample ;)
http://code.msdn.microsoft.com/ie/Scrolling-panning-and-6834aaf9/sourcecode?fileId=68336&pathId=380363024
I need to create a dropdown, which can contain 100s of options.
I need a scrollbar to appear and be consistent across all browsers.
Google came up empty: Is there a good URL that describes if this is consistent or not?
I would strongly recommend against having a scrollable select with 100s of options for usability reasons.
With exception of one corner case, navigating (both searching in, and selecting from) that list is a really really hard and very annoying to the user.
The UI design reasoning is that it requires:
Wide mouse gesture (tiring), followed by immediate precise stop (hard to do because of inertia)
Very difficult to use interface of a scrollbar (extra crap points for scrollbar being in the middle of the page instead of on the right side) - see Jacob Nielsen's and others' usual ranting about difficulties of using scrollbars and general evil of anything too long that requires much scrolling.
Eyes need to scan whole page worth of menu up and down and back, all the time. very tiring.
Here is a set of bad examples
[ the corner case is when all the option names are uniformly distributed across the alphabet (as far as the first letter), which allows somewhat-possible keyboard-only navigation in the drop-down via pressing the first letter of an option ].
A proper UI solution is to have a select whose contents are dynamically populated based on a search field - either typed text (think Google's new search box, or browser's address bar) or sometimes checkboxes/radio buttons.
BTW, sub-menu solutions also suck for mouse navigation - minor twitch of the wrist and you lost all of the pointing work.
I apologize that this answer is not an answer to "how do you solve my technical problem", but I am of a very strong opinin that you're solving the wrong problem in the first place.
HTH.
The short answer is no, for the standard HTML select element and the requirements you describe.
However, do you know you can set the size attribute for how many rows are visible at one time? AFAIK this will force scrolling in all browsers, but it isn't a drop down. Like this:
<select size="10">
<option>etc</option>
...
</select>
There is also the possiblity of optgroup to split the options into categories.
If you have many categories you could do what I did on one site and use this jQuery click menu, using the click function to set a hidden field. So now I have a dropdown with sub-categories and it's quite easy to find the right option.