We Keep Coding

React Drag and Drop plugin suggestion

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.

HTML drag and drop dashboard with resizable elements

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.

Select and drag to get selected elements

I want to add a rectangle drag to my code here is the fiddle http://jsfiddle.net/cyTUX/39/ ,what this code does is onclick it changes states, it has 3 states, so if we select a state and drag it around the table cells, the cells involved in the drag gets that state.
so, what i want is, instead of selecting and dragging in that way, what i want to do is select a state and drag like a rectangle so all the table cells in the rectangle gets that state.
Any idea or example on how to do this?

So I was writing an electron app and had the exact same problem.
Since I did not want to use jQuery I wrote something myself.
It took quite long to write it, so I made a plugin out of it that you can easily use yourself. It’s super small and does just that. I called it DragSelect and you can get it from Github.
The cool thing about this is that you have 0 dependencies and thus can use it with any framework you like.
The selection algorithm works like a charm and even gives you an independent multi-selection with modifier keys for free.
So taken from the github readme:
1. Installation
easy
Just download the file (minified) and add it to your document:
<script src="https://thibaultjanbeyer.github.io/DragSelect/ds.min.js"></script>
npm
npm install --save-dev npm-dragselect
bower
bower install --save-dev dragselect
That's it, you're ready to rock!
Of course, you can also just include the function within your code to save a request.
Usage
Now in your JavaScript you can simply pass elements to the function like so:
simple
Choose which elements can be selected:
var ds = new DragSelect({
selectables: document.getElementsByClassName('selectable-nodes')
});
There is plenty more stuff you can do so make sure to read the whole documentation on github
Enjoy

create a new div
<div style="position:absolute;border:1px solid green;display:none" id="rectangle"></div>
and then something like this
i hope you can work your way out and finish it its just and brute example how to approach this
var element = $("#rectangle");
// on mousedown
$(window).mousedown(function(e1){
// first move element on mouse location
element.show().css({top:e1.pageY, left:e1.pageX});
// resize that div so it will be resizing while moouse is still pressed
var resize = function(e2) {
// you should check for direction in here and moves with top or left
element.width(e2.pageX - e1.pageX);
element.height(e2.pageY - e1.pageY);
};
$(window).mousemove(resize);
// and finally unbind those functions when mouse click is released
var unbind = function() {
$(window).unbind(resize);
$(window).unbind(unbind);
};
$(window).mouseup(unbind);
});
like this you can drag to create rectangle but only from left to right direction, you can see example in here
http://jsfiddle.net/dXduv/1
you can take actual positions from events to calculate which divs are inside and which are outside the area

jQuery UI has the ability to handle selection, drag and drop, resizing, and selection. If you're already using jQuery, then adding jQuery UI is very easy. You'll also find it includes many pre-made UI elements which makes form creation quick and easy. Using a separate library like jQuery UI (also check out Kendo UI) is often a lot easier to do than trying to code complex Javascript features like this yourself. You'll save time and likely have a more functional product.
This example in particular from jQuery UI may be of use to you.

How to make draggable DIVs which align to 960.gs or other grid framework?

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.

How to implement mouse dragging in javascript

How to implement mouse dragging in javascript. Should i write a separate function or is any built in method like 'click, mousedown,...' available

JQuery is your friend. Check it out, it is truely life changing! :)
Specifically for what you are looking for, JQuery UI draggable