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.
Related
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 want to create a iGoogle kind of layout in which you can drag and drop different widgets in different places. I have to use javascript or jquery only. I wanted to know how to go about it. Basically how to start and implement this kind of structure.
P.S.: I cant use any specific framework which does this job. I have to create it myself.
You can also use draggable and droppable jquery plugins. See example here
http://jqueryui.com/droppable/#revert
update
You have to write your own dragable function. The trick is you listen to onmousedown event and then redraw the element at current x, y postion.
Look at this example
Note : if you want to learn, then do not copy paste the example. Try to understand and then implement on your own !
Check out jQuery UI's Sortable interaction functionality, should give you a good starting point.
http://jqueryui.com/sortable/#display-grid
I'm using OpenLayers to display a map and to provide some drawing features. I also added two SelectFeatures to the vector layer I want to draw on. One for highlighting a drawn feature by hover it and one for selecting a feature by clicking on it.
I used this example to realize this.
The problem is, that this solution doesn't really work (even in the given example).
If I draw a new feature I can highlight it by putting the cursor on it but can't select it with a click. (Same in the example, the given features work fine, but after drawing a new one the select-by-click function doesn't react anymore)
Is there any alternative solution to realize this except the official example?
This example was modified 4 months ago, editing toolbar was excluded due to described confusion.
I was able to get something like this working. You need to activate the controls in a specific order:
highlightControl.activate();
selectControl.activate();
dragControl.activate();
Hover events aren't handled by the Drag and Pan Controller, so they try the select controller, which doesn't use them either, passing them up to the highlight controller. Similarly, click events aren't handled by the drag controller, but are handled by the select controller. Finally, drag events are dealt with by the drag controller. The last to be activated is the first to be "consulted".
Are there any lightweight frameworks out there for this task. I have a collection of divs, that I want to be able to save positions when dragged/resized/pushed etc.
I was going to build one, to my spec, but if there is a lightweight one out there that might save me a lot of time. I've seen some jQuery plugins that push divs around a page fluidly.
I want to be able to save positions, but also snap divs to each other and save all news positions for divs moved or re-sized. I've looked briefly at shindig, but seems a bit heavy... at least I wanted to see if there are any lightweight front end alternatives.
I will be using php for my backend.
Consider midorijs (www.midorijs.com). It is lightweight and contains a simple drag and drop interface complete with a default drop callback function. You can also define your own. You mentioned you wanted a callback for position save, Midori's callback function does pass the x,y coordinates of the object.
Chceck out more drag and drop callback details at the bottom of this page: http://www.midorijs.com/midoriDragDrop.html
Another benefit since you mentioned you are using php is Midori's convertToFields function which converts javascript object to php.
Good luck!
Why not using jQuery ui? You can customize a bundle to fit your needs + when delivering from googlecode you can get sure that a huge amount of users already have that in their cache. And you can easily get the positionings and push them to your server.
http://jqueryui.com/download