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)
Related
I am looking to implement a sortable (ordering) drag and drop between columns as well as in column. I looked all over internet to find any example that does not use a library for it. I'd love to implement it in VueJS, however, any examples are welcome.
It should basically function like JIRA, where you have TODO and IN PROGRESS columns for example, you can order them by priority in the column itself, or move it to another column.
The reason, why I do not want to use any library is because I want to build my own complex functionalities. I also do not wanna fork existing github libraries to modify them. I'd love any suggestions!
Doing a simple search with the following keywords: creating drag and drop feature "without" library javascript pure I was able to find this links:
Building drag and drop feature in react for react applications
Building drag and drop feature with pure javascript
Useful tip
If you don't know surrounding some keyword in a google search with quotes forces google to only show results with that word in specific
Is it possible to draw a graph in an HTML file using the jOrgChart jQuery plugin, as in the example below?
If that's not possible then what are other options are available for drawing such chart, without using Drupal?
Assuming that this question is about the jOrgChart jQuery plugin, and assuming that Drupal is an option to consider, then for sure it's worth considering the jOrgChart sandbox ... at least that's where I'll start from if some day I want to start using jOrgChart in Drupal.
For other Drupal based alternatives for charting, checkout the Comparison of charting modules I created (note to myself: add this jOrgChart plugin and sandbox project to that comparison).
Curious to hear to what extend this attempt is an answer to this charting question ...
PS: Checkout my profile for more details about my charting background, etc.
Very easy to use given a nested unordered list element.
Drag-and-drop functionality allows reordering of the tree and
underlying structure.
Showing/hiding a particular branch of the tree by clicking on the
respective node.
Nodes can contain any amount of HTML except and . Easy to
style.
You can specify that sub-trees should start collapsed, which is
useful for very large trees
for html
https://dl.dropboxusercontent.com/u/4151695/html/jOrgChart/example/example.html
Sencha Touch seems like an amazing way to develop mobile apps. I've seen posts by people incorporating Jquery, D3.
At the same time the posts describing customizing controls seems to be fairly narrow.
Adding the picture of a kitten next to the slider and labeling the slider seems kinda tame compared to what ios can do in terms of custom controls, at least in terms of examples available. Most blog posts imply you can extend the control objects in Sencha or the CSS file.
These posts are not quite what I'm looking for - that's my problem. I can't see any examples of anyone changing default controls in Sencha touch, but they make it sound as if it might be possible to do anything.
This is my question:
Is Sencha Touch able to build an iOS or Android App incorporating any javascript library or HTML5? Are there any limitations here?
To give an example I trying to implement a custom slider, where a touch along a continuous line or a circle like this color selector will enter new values. Further if you incorporate a library like protovis or D3 (or Raphael charts) can Sencha display anything the graph canvas element will otherwise display? Will it take touch input and interact with the graph libraries the way that the HTML5 graph does?
The post you mentioned is not about customizing controls, it's about displaying a list from bound store, instead of of using just Ext.XTemplate (the system with Ext.view.View) to generate HTML, it uses ComponentView to generate Ext.Components instead.
It's hard to tell what you're asking, what in particular are you trying to do?
To address some of the questions you added:
Charts in Sencha are implemented using Raphael, which uses SVG, therefore all the elements in the chart can be interacted with using HTML events.
Everything that Sencha generates is valid HTML, you can listen to HTML events, but components usually abstract the lower level events into something that is easier to consume, (for example a data view abstracts the click so that it passes the record being clicked along with the event).
Therefore, the answer to the question is, YES, Sencha can co-exist with regular HTML. If you want the full benefit of the framework, you should always create an Ext.Component so that your components can be easily used within the framework's layout containers.
It's very easy to misuse Ext when trying to write regular HTML and still place that within the layout rendering pipeline. Ext.Component has a built in way of creating HTML out of templates, see http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-data and http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-tpl
Background
I am tasked with developing the front-end to an analytics product that presents the information to the user in a customizable dashboard like the one used by Google Analytics:
- Dashboard is comprised of draggable widgets arranged in a grid layout
- Widgets have a drag handle which can be clicked by the user to start dragging
- Widgets can be re-ordered by dragging and dropping the widget
Question
Part 1. Using jQuery (or any other open source Javascript API) can anyone explain to me how such a feature is implemented, from a high level overview.
Part 2. Can you recommend any resources for me to read that may be relevant to implementing this feature, or any foreseeable related features? (books, links, api docs, tutorials)
EDIT This one looks even better and more maintained! GRID by UberVU
Next one on the list is gridster.js
PS: I know this is an old thread but since this question is the first hit in Google I think its worth listing some newer libraries.
You can easily implement this.
You will get required info from
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
and
http://james.padolsey.com/javascript/inettuts-with-cookies/
First what comes to head is jQuery UI.
Use HTML 5
http://html5doctor.com/native-drag-and-drop/
You can find a lot of info here:
http://jqueryui.com/demos/draggable/
Use jQuery, and get on the Demo & Doc page to see how D&D is being used.
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/
If you wanna dive into a Widget Page/Dashboard architecture, and would like to see how others did it, take a look at Omar AL Zabir's book
http://www.amazon.com/Building-Web-2-0-Portal-ASP-Net/dp/0596510500/ref=ntt_at_ep_dpt_1
I am pretty sure this one is going to make you happy!
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
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