I'm currently trying to rewrite a desktop app to something that can be run in a browser. I have (more or less) the idea how to rewrite most of the features, but there's one in particular that I'm not sure how to tackle.
So the app does have text fields (hundreds of them). You can click any of them and type some data. It's all fine till now, but next thing is, you can drag and drop to swap them (or content of them) with each other.
On desktop drag and drop is done with right mouse button, but I'm not sure if that's feasible for web. I was also looking up some drag and drop libraries, but they all seems to handle more "static" elements like divs, images, etc, but never input fields (maybe because they're stealing click events?).
Does anyone in here have a clever idea how to achieve something like this? Maybe someone else have done something similar or maybe it would be easier to do if XYZ? Ideally in React (because that's what I'm using for rest of the app), but if it's work in any other way maybe I'll be able to adopt it.
Thanks for any suggestions in advance.
I use https://github.com/atlassian/react-beautiful-dnd
The main idea is using Draggable and Droppable components. Also, it's possible to handle both clicks and drag events. But it's complex a bit.
Related
It is possible to customise nodes on a ThreeForceGraph, using APIs provided at https://github.com/vasturiano/three-forcegraph, using the method ThreeForceGraph.nodeThreeObject(...). The ... here can be a THREE.Sprite instance, and we can render any svg picture to THREE.Sprite.
However, I wish to have something more than a picture. I wish to add two clickable buttons to each node of the graph. I can do Sprite.addEventListener(...) to detect mouse click, but this is not quite the same as a button. It would be really nice if I can make each node on the graph into a React component (that would be the ideal situation).
After looking around, I haven't found any ways to implement this. Is there any ways to achieve what I described? (Of course, it does not need to be a method of Three.js.) Any examples/references are greatly appreciated.
I'm working on with a working model like this:
So here, the left side is a simple list which containse list items.
1. This is not droppable, draggable only
2. After drag, this list remains same all the time.
On the right side, the dragged item will be dropped here.
Once the user dragged an item from left side, the other side/ right side should indicate a placeholders to user where they can drop.
All the dropped items on the right side can be swappable within right side.
Right side area should contain like bootstrap row, column functionality.
I have to achieve something similar to this https://react-email-editor-demo.netlify.com/
Already, I gone through fre react plugins like react dnd and react -beautiful-dnd. I don't get an idea like whether above points are achievable by using these two plugins.
After searched many things,In react-beautiful-dnd, we can't add custom placeholders.
Any help on this, would be grateful.
Here I created for you a small example that tries to replicate the drag in a placeholder behavior from the link you shared above.
Keep in mind that you have total freedom to create how many droppable targets as you want and make them accept different types of items, based on what you specify in accept array of useDrop hook.
I hope it helps.
React DND is the most popular library. However, it is not impossible to implement your own. Please, have a look on this answer.
I'm not sure about the placeholder suggestion bit but Dragula JS is a quite easy library to use for drag and drop features. You can check it on github and see the demos there too.
https://github.com/bevacqua/dragula
Demo page - https://bevacqua.github.io/dragula
Hope this helps.
I'm trying to develop a control where one must be able to add elements, move and resize them. The idea is to draw small diagrams by dragging some elements to the dashboard. Here is what I'm trying to accomplish:
The dashboard must have fixed boundaries (left/right/bottom/top). Elements should collide with them and not go beyond.
Elements can be added with a button or dragged from a repository
Elements must be resizable
Elements should collide
Elements must be movable - freestyle, NOT adjust at the top like gridster or gridstack. I need to be able to put an element at the bottom or at the middle of the dashboard and have empty spaces.
I must be able to get all the necessary data from the elements in order to store and recreate the dashboard (save & load).
I started by creating this small test project using the drag & drop features, but soon got the feeling I was trying to reinvent the wheel and maybe doing it in an unnecssary old fashioned way.
But after a few searches, I still didn't find one plugin/control that behaves the way I need or is easy enough for me to change.
Gridster and gridstack make the elements go at the top.
TinyDraggable looks nice, but is not resizable. I did try to make the div elements .resizable() (adding the jQueryUI) but I wasn't able to make it work. This plugin does not have (I think) collisions, which would be OK if I managed to get everything else needed. I do like the freedom of movement of the draggable items compared to my tiny project where they go from slot to slot.
So, the question is: do you know if there is any suitable plugin (jQuery) for me? Ready to use or easy to configure/change?
Many thanks
Try https://github.com/troolee/gridstack.js with float mode. In this mode widgets do not go to the top of container.
The library is in active developing. So I can implement missing reasonable features.
I am currently planing quite a complex web application (WebGL - Three.JS) and I am experimenting with a few tests right now. The problem I stumbled upon is rising a lot of questions for me and I don't know a correct way to do it and I would really appreciate if anyone could point me to the right direction.
So here is the thing:
My applications needs a lot of event listeners and It needs to be as modular as possible. So that I can remove something without breaking everything.
With events listeners I mean, that I need to check If user clicked on element, if element is selected, If it is, change tools view,... Pretty complex. I will also develope a few tools (Cloning, mirroring,..) and I can clearly see that with functions I won't be able to do it efficently and my code will get VERY MESSY. Or for example; If users select "cube draw" control, I need to lock some of the controls, and then listen for the click event,.. But the problem is, how do ižI structure so many different click events?
Actually I draw a simple sketch what I need:
Also, so that you won't think I am lazy, I've written a simple example of what I need with pure Javascript functions,.. It's already buggy, sphagheti and I don't think it's the right way. It has to be another way right?
My attemp:
JsFiddle
I am looking for something like: http://shapesmith.net/, but it's written with Backbone and so many different files that I cannot get a clue how it's made.
add your domelement to the trackballcontrol.. so that the click event made on renderer portion will identify by trackball control...
controls = new THREE.TrackballControls( camera, renderer.domElement );
I am working in making an app around the 960.gs based system (although the grid framework isn't set in store yet).
What I would like to do is enable the user to drag and drop specific layout elements (DIVs), which would, theoretically, move the blocks of the design around. I know JQuery UI has a drag and drop system, which may be a component of this project, but what I want to do is make sure that the user can only drag, drop and stretch/expand divs according to the limitations of the defined css grid. And make sure that nothing will violate the boundaries of the grid, and generate the proper css classes to display correctly....
I have scoured the net and stack exchange for some examples along this line, but I haven't seen anything. Can someone point me in the right direction?
I'm looking into a similar problem, and I found a few options that are not based on 960.gs.
jQuery EasyUI (www.jeasyui.com/) has something like this; here is a direct link to their demo.
There's also iNettuts, which is something similar.
Since you said the grid framework choice isn't solid, I think these options might be useful.