I am expecting something to design where I’m going to have a list of some things as a dropdown list. And I could drag items(one at a time) from the list on the left-hand side to the right-hand side of the grid which looks like as shown below:
is something I was thinking about. So I could have the list that I was envisioning in a dropdown list to something like they have on the left-hand side. But I would like to drag it on one of the squares with some background color of the image I showed above. For example, the first item could go into A1 or A3 or any other square with a yellow background color and the text showing over there.
I am wondering:
Is it possible to have something like what I’m thinking? Basically, have it dragged inside a particular square.
I would also like to provide the user the functionality to edit the text content on the fly once it’s sitting on the square.
Does the above library sound like a correct choice based on what I described or if anyone is familiar with any other library that is better than the above one, please share your input.
Drag and drop is a browser api and js is used to handle the events, so no need for a library.
Some browsers may use different event listeners so if tempted to use other user’s code make sure that the code is not ancient and uses the latest js version.
Elements that can be dragged must have a ‘draggable’ property.
They must also handle the ‘dragstart’ event.
And also the ‘dragend’ event.
The elements that you are dropping the dragged element onto must handle the ‘drop’, and ‘dragover’ events.
There are also 'dragenter and ‘dragleave’ events. I don’t use them as I use Safari or Chrome on an iMack, but they may be needed in other browsers.
It is a good idea to give a visual indicator on the elements that can receive the drop and a different indicator when the dragged element is over a drop target. Use css classes.
Decide whether to create seperate listeners for the draggable and drop target elements or a single listener for all draggable and drop targets.
You do have the option of dragging the whole element or the text content. Also you can move the element or drag a copy of the element.
Do it in stages, the dragstart first, then dragover, then drop and finally dragend.
It is years since I did drag n drop. I abstracted it and generally just reuse the abstracted listeners. There are also dragenter and dragleave events.
It is quicker to invest the time to thourally understand how DnD works before writing any code as each stage is dependent on the previous stage/s.
Thank you for the explanation. One question - So it sounds like I can create the grid that I have shown in my first image using css with 12 rows and A-H columns. If I have to drag an item to A-1 or B-2 etc, will I be able to fit the data that I’m dragging onto the specified boundaries?
Also, if a user is opening the UI page after closing it, I would need to have it display where the user left it off before closing it. So I’m not sure if this would require me to store the boundaries of the square where user drug it.
The requirement to have the page be the same when reopened means that the data needs to be stored in localstorage.
Therefore I would recommend that the data be kept in an object and when the drop has ended that the page be redrawn using the data object which is kept and updated in localstorage.
The object could contain all the info required to draw the grid.
Editing data already stored complicates things.
I use a popup html5 dialog element containing a textarea element with Cancel and Save buttons, which comes up with a context button click.
Is storing it in the database preferred over localstorage or sessionstorage when page is reopened because there is a possibility of user closing the browser and that could wipe out localstorage data, right?
localStorage is persistent to the current browser, while sessionStorage is not. But if the user change to another browser the localStorage settings are empty.
Storing the users setting in the database is good, but a mix is better IMO. Check if the localstorage.prefs(?) is empty and then fetch prefs from the database ONCE and store it in localStorage in order to reduce network traffic.
This is a good idea. I will try to acomplish this. Is this how we check with prefs function localstorage.prefs(?) whether a local storage exists or not?
I do it this way roughly. A script at the top of the body or where it suits you best.
<script>
if (!localStorage.theme) { //if localStorage.theme is empty
var prefs = get_prefs() //call function to fetch prefs from the database
localStorage.setItem("theme", prefs); //set prefs from database
}
</script>
Do I need to worry about localStorage space at any point? Did you worry about the same at any time while working with localStorage? I believe the overall space is around 10 MB if I remember correctly for local, session etc (all types of storage on browser).
I use localStorage, sessionStorage and cookies for very small preferences data. So i do not worry about any limits. But there is also IndexedDB you can use. Read more about this here. Quote:
The IndexedDB API provides the browser with a complete database system for storing complex data. This can be used for things from complete sets of customer records to even complex data types like audio or video files.
Since I’m planning to store some details in the database as well. Is it enough to store the coordinates (X, Y) of the grid in my database table so that next time I open the page and if there’s a need for a database call (in a scenario if localStorage doesn’t exist) then I could display the dragged item location on the screen using just the coordinates. If you can think of anything else, please feel free to discuss it. Thanks!
Suppose I have a list of 90-100 items on the left side of a button. Right-hand side of the button is a rectangular grid just like I’ve shown above.
Is it possible to drag 90-100 list items automatically using just a button click if I have the location or position ( I should say) on the right-hand side fixed or in other words, if I know where to put item 1, item 2 etc item 100 inside the rectangular box? For example, if I want to put item 1 inside A-1, item 2 in A-2 etc
If the coordinates should be persistent regardless of browser and computer, there is no way to do this without saving this into a database IMO. If you accept “semi persistent” I should consider localStorage as you only store the coordinates which should fit within 10 MB limit.
Even if I’m using the database to store the coordinates, is this going to create a problem if people are viewing the grid in different monitor screen size? I didn’t think of it but good that you raised this point.
If you use scaled vector graphics for the grid and date rendition you would not have to worry about different screen sizes. That said, if you wanted to make the grid responsive to differing data lengths by adjusting row or column dimensions then that could be easier with SVG.
I don’t use libraries.
Basically you have text content, cells, columns, rows and grid. All except the grid can be defined and then copied.
Text length control the others.
Be aware that the svg identifier has two meanings and the svg element is very complex.
