I tried using the library `` gridstack.js '' that can instantly introduce cards that can be intuitively operated by dragging and dropping
When developing a web application, I would like to make the operation as intuitive as possible, but it is quite troublesome to implement the drag and drop operation so that it can be performed within the browser. `` gridstack.js '' is a library that does such troublesome implementation instead, and it is said that it is possible to implement cards that can be dragged and dropped in a moment, so I actually used it and tried it. rice field.
gridstack.js | Build interactive dashboards in minutes.
gridstack/gridstack.js: Build interactive dashboards in minutes.
https://github.com/gridstack/gridstack.js
If you go to the gridstack.jp site , you can find a demo. Click on the card labeled 'Drag me!' and drag it to the left ...
The card on the left automatically slid down, and the card that was being dragged into the empty space entered.
If you drag it further to the left, it will be replaced with the first card.
Click the arrow mark on the bottom right and pull it to extend the card. The cards that got in the way on the way automatically slid down to make space.
Another demo is available, here is an 'immovable card' that says 'I can't be moved or dragged!' and 'Drag me! ...but don't resize me!' There is a ``card whose size cannot be changed'' written as ``. Cards that cannot be resized do not have a lower right arrow mark.
Also, you can delete the card by dragging and dropping the card to the trash can mark part ......
A function that allows you to generate new cards by dragging and dropping cards from outside the frame is being shown.
So I will actually use it. You need to install node.js to use gridstack.js. From the URL below, select the installation method that matches your environment.
Installing Node.js using a package manager | Node.js
In order to use Ubuntu this time, I installed Node.js with the following code.
[code]curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - &&\
sudo apt-get install -y nodejs[/code]
Once Node.js is installed, install gridstack.js with the code below.
[code]npm install --save gridstack[/code]
A folder called 'node_modules' will be created in the installed location. 'gridstack-all.js' and 'gridstack.min.css' in the 'gridstack' → 'dist' folder are the files you need this time.
Load this CSS and Javascript into html ......
The generated card has a class called 'grid-stack-item-content', so we'll color it to make it easier to understand. A div element with a class name of 'grid-stack' will be the outer frame, and a card will be generated inside it. I wrote the code to generate the outer frame and the code to generate the card in the script tag.
When you open the html file containing the code in your browser, a card that you can safely drag and drop is generated.
In addition to the pure Javascript environment, gridstackjs can also operate within frameworks such as React and Vue.
Related Posts:
in Review, Software, Web Application, Posted by log1d_ts