I have html something like that. I want to make it editable like form builder.
Example:
https://app.pandadoc.com/a/#/documents/BQ8wx4gSwrtETmVvFnWoXC/widgets?widget=XFWXJPW7gpJVzZEnYZFGoh
Want functionality something like example.
This is a very broad question that's going to be hard to answer, but at the very least, you're going to need JavaScript and probably something like jQueryUI for some of the UI interactions.
Start with some of the resources below and go from there. When you run into specific problems, come back and ask specific questions with code that we can use to recreate and troubleshoot the problem with:
jQueryUI Droppable for drag and drop.
jQueryUI Sortable for functionality similar to form builder.
Drag and Drop File Uploading example from CSS Tricks. (this is just one implementation. There are many ways to do this.
DropzoneJS Another drag and drop file uploader.
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 looking for some input on a certain element of a project I'm developing. I want to include multilevel menus that easily manageable in the back end. I really like the structure wordpress uses in their back end to let users create menu's intuitively by dragging the menu items around. I'm looking for a bit of guidance with the multilevel part. I have made sortable lists before using jquery ui, but I'm a bit lost on the multilevel functionality (the js part)
I'd appreciate any input (plugins, examples, concepts) on this.
Thanks.
jsTree is a plugin designed to do this. It's a good bet that there are others -- try searching the jQuery plugins.
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.
Ok on meebo.com there is instant messages that when you click at the top you can move around i wanna make something like that?
So how do I make Movable forms in JS?
I recommend the jQuery UI plugin called Draggable.
You first need to create your form. Your form will most likely be a div (with solid color or image for the background). Within the div, you have all your form content. The div will also need to be position absolutely (i.e. style="position:absolute")
The JavaScript is fairly straight forward; however, I would personally use something like jQuery to do the work. I'm not sure how familiar with JavaScript you are, but even for an advanced user, using something like jQuery just makes sense. There is a library of tons of already built forms etc with great instructions on how to use them. Let me know if you need more info on how to use a library like jQuery (you can find it here:
http://jquery.com/
You can see all the plugins here:
http://plugins.jquery.com/ (look at 'windows and overlays' - lots of them!)
Click on one that looks interesting, and click on 'demonstration' to see if you like it. For example, the third link down - (mb)ConteinersPlus, a jQuery component for fully customizable and featured container layout (DIV box model) - would let you do this (with almost no work on your end)
http://pupunzi.com/ (this is the example link)
Obviously, if you want to learn how to script it by hand, let me know.
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.