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.
Related
I'm currently working on a project that requires building a web page with a Calendar.
The Calendar should suppport booking (which means positioning boxes within the Calendar that span on a number of cells)
I built something simple using css grid, but later on I found out the customer uses IE11.
I tried using AutoPrefix to make the grid compatible, but it messed it up even worse and I think I'll waste more time adjusting then just using something other than grid.
I'm about to scrap my design and just go old school with <table> but before I do that, I wanted to ask for recommendations. Is there a better solution?
This is what it should look like:
I'm looking for a jQuery tagging/autocomplete plugin where I tags can be inserted mid-order - and control over this is possible with the mouse.
I've gone through everything I can find, but am yet to find a plugin with all the requirements I'm looking for. I'm looking for a Facebook-esque tagging plugin, yet I'll be working with pre-defined phrases, and building them up into a paragraph, so I need to be able to control the order, and potentially insert a new tag in the middle of an existing selection.
The closest I've found to having this functionality is TextBoxList and the 'Facebook Theme' of JQuery TokenInput. Both of these however only allow you to move the cursor between tags with the arrow keys - and I'm looking to be able to mouseclick to control the cursor aswell.
Anyone know anything that's got what I need? A few other key essentials are free-text input (when no tag matches), remote source of data, and form submission, but I'd hope they'll be easier to retro-fit to something else!
An update for Googlers - I went with jQuery-tokeninput, and have spent the day modifying the library to work with mouse input. When I get time to tidy the code, and check how it works with other themes, I may put a pull request on GitHub, it seems like fairly useful functionality to me.
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/
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.
I want to build a tool (with HTML5, JS and CSS3), which helps customers to arrange elements on a website mockup (e.g. text blocks and pictures). I want to save the position of these
elements in order to reconstruct the whole mockup website later.
Maybe a grid system would be the best?
alt text http://img.skitch.com/20090817-t4p54kbxw3rj58mkmqxspj4qch.png
I would be happy to get some ideas on approaches for this challenge. Are there any similar projects, I should take a look at?
Regards,
Stefan
YUI has lots of widgets for this sorta thing with lots of examples.
Drag & Drop: Examples
Especially this example
Drag & Drop: Using Interaction Groups
All you would have to do register a listener on the drop event to send an ajax request to the server and save the xy co-ordinates.
ALSO, if you want to do resizing as well
Resize Utility: Examples
They have a few really neat examples, including this image cropper
ImageCropper Control: Real Time Crop Feedback
The jQuery framework would help you in synchronizing the JS and DHTML events. As far as other projects that use this, I'm not aware of any, but a grid model seems like a good way to go. Just make sure it's more precise than the 125px you currently have :)
EDIT: The website that was mentioned in the DHTML book I mentioned in my comment was http://www.panic.com . You can take a look at their JavaScript code for some inspiration, as they implement a drag and drop system for downloading their products.
Not sure if it'll help, but my "PanelManager" might make things a little easier (if you're not already using a larger framework with similar functionality):
DP_PanelManager
"Panels" are just normal DOM elements with extensions for common actions/modifications (moving, resizing, etc). Panels can exist within one or more "PanelManagers" which allow you to treat them as a single unit (sorting, looping, etc).
Look at the example "Drag-and-Drop with Ordering" for a simplified example of (what I think) you're looking for. You would then need to do the same kind of looping to save whatever information you want (probably just name and position).
In any case there might be some code there you can rip out - feel free to fold, spindle and/or mutilate.