I'm making web-based quiz to help some people get some qualifications. After recently discovering the wonderful world of HTML5 (I've been previously programming in XHTML), I thought the ability to drag and drop a picture from a start box to an answer box would be a great addition to break up the monotony of lists, radio buttons, and textboxes.
I do not have access to PHP or JQUERY. (The site is meant to run on a box with no internet, nor do I have access to setup a web server to support PHP).
Is it possible, using JavaScript and four boxes/divs (one for the start position and three possible answer boxes), to determine which box/div the image is in?
Thank you very much!
You can download jQuery (http://jquery.com/download/) and jQuery UI (http://jqueryui.com/download/) and add them to your page as a script
then take a look at draggable and droppable on the jQuery UI docs : http://jqueryui.com/droppable/
Related
Requirement
We are having a webrtc call solution where multiple people on a webinar call. we have used a third party WebRTC provider (Agora) with HTML webpack Build code they have shared.
We want to drag , drop and switch the users who are joining the channel . Its a complete HTML5 WebPack code.
CODE
Git Code : https://github.com/AgoraIO/Basic-Video-Call/tree/master/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack
Front End : https://webdemo.agora.io/agora-web-showcase/examples/Agora-Web-Tutorial-1to1-Web/
Problem
We used JQUERY Draggable and Droppable in the code which we have. But whenever a NEW user is added to the WEBRTC call a new DIV is generated and that is not DRAGABLE or DROPPABLE.
HELP REQUIRED
I would appreciate any good drag and drop library which can be used in dynamic users for HTML5 WEBPACK
It seems like you shared Agora code rather than your own code which contains the drag/drop logic. Can you share your code with your drag/drop implementation? It would make it easier to provide a relevant answer as to what might be going wrong.
Regarding drag and drop libraries, I really don't think a library is likely to help you until you know what's going wrong with your current implementation, but here are some options:
Draggable - Originally written by Shopify but now with other maintainers
InteractJS - Looks interesting but have not tried this one myself
(Not a library) Native HTML drag and drop API - What I've used when implementing similar features in the past, though with Daily rather than Agora (not that this should make a difference for the drag/drop features)
I'm trying to build an interactive user guide for an application. Basically when its the users first time using the application they will be offered a tour of the site. It'll be pretty much done with a series of modal pop up boxes and focusing on elements.
My problem is i can't find a way to get control of the cursor to move it to certain locations of the page, is there a way to achieve this with JS, Jquery or CSS? Or is there any plugins available?
You can have a look at Bootstrap Tour or Joyride Plugin
I am writing a web application that lets a user create their own forms by dragging and dropping input elements (textfields, textareas, etc.).
Currently, the user is able to add / reorder (up or down) / remove form elements, but I need to make them freely draggable.
Some time ago I have seen a tool written in Javascript that lets a user drag&drop tables and then generates SQL from that, but I can't remember where I saw it.
Maybe there is some kind of JS library for this, preferably something for Mootools/jQuery? I searched for it, but didn't get any results.
Any ideas?
See jQueryUI. Specifically draggable and droppable.
Do you know of a tab widget that has built-in drag+drop reordering? I'm building an editor-like interface and want to allow the user to reorder their tabs.
So far I've been using ExtJS with a community plugin, but it's buggy and usually needs updating with every new ExtJS release.
Is something like this what you're looking for?
I'd definitely use jQuery and jQuery UI as a base if I was trying to do what you are. The solid support structure and wealth of tutorials around jQuery is unbeatable!
Of course this is if you don't mind the weight of another javascript framework or having to recode some of your interface.
On a slight tangent, if you want your interface to remember a user's preferences you'll need a server-side language. Alternatively, use the jQuery cookie plugin to store preferences between page loads.
There's a draggable tab widget based on YUI lib just for that.
If you're not concerned about adding another javascript lib to your application, I think it's an interesting alternative. You can even drag and drop tabs from other containers (I didn't see this feature on your ExtJS plugin by the way).
There are attempts to make jquery tabs drag and drop able. While it is not drag and dropable out of the box you could make them yourself in jquery-ui.
Here are some resources that tried it:
Resource 1
Resource 2
What I want to achieve is as follows:
For example, there is a symbol which represents a table on a web page, a user can drag this element to any place on the web page, when the user looses the cursor, a dialogue box will pop up to ask the user to input values of attributes, for example,the number of columns, the number of rows, after the input, the corresponding table will come out at the place where the user chose. Of course, the symbol which represents a table is still at the original place. It is like a web version of dreamweaver. How to do this with Javascript?
If your question is how to start researching this feature I'd start with:
JQuery to get started with fancy yet easy javascript functionality
JQuery UI: Draggable, Dialog, etc
To actually develop the feature, if you don't know where to start, start small. Create a very basic web page with maybe just an icon and a button and then write some javascript to do something minor like display a dialog and show the result. Slowly start adding things like dragging something around, etc.
The JQuery UI stuff has lots of demos that you can start out with as a base to start customizing.
Warning: The first time I hit the JQuery UI Demos page I wasted at least a couple of days playing with all their cool stuff. It's so easy because the source is right there and you can also see it working in the browser on the demo page.
Did you look at the jQuery UI demonstration pages? The simple photo manager demo contains all the major pieces you'll need: Dragging an item, handling the drop event, doing something custom on drop. The revert demo may also be of interest
Begin by defining the requirements of your project. Break it down into smaller tasks and milestones. Then some learning and research on what javascript and frameworks like jquery can provide. Also check for existing solutions or components that you may be able to use and reduce your development efforts.