|
Let us Read for you.
 |
Adding Drag & Drop to Your Web App, the Simple Way -Dragula
You can find the plenty of open-source drag and drop libraries on the web. People think that it is one of simplest task for the developers. My advice is now to take quick decision for the first library you find! Go for the technical approach, must spend few days to analyse whether it meets your requirement or not. One method is that you can drag and drop with the help of HTML5 without installing any external library. Secondly, look into the DRAGULA, the best solution for reordering blocks on a web page. Dragula comes with a stylish features.
Following are some of the demos:
1. Drag & Drop with HTML5
2. Drag & Drop with Dragula and React
3. Drag & Drop with Dragula and Angular 1
4. A Sturdy Solution: Drag & Drop with HTML5 Attributes
All are consists of two options: Drop zone and draggable item:
<div> DRAGGABLE ITEM </div>
<div> DROP ZONE </div>
To firstly make the first element draggable, add its attribute:
<div draggable=”true”> DRAGGABLE ITEM </div>
With these attributes, still the drop zone is not operational. Now, we can use the on Drag over attribute to enable this behaviour:
<div ondragover=”allowDrop(event)”> DROP ZONE </div>
<script>
allowDrop = (event) => {
event.preventDefault();
}
</script>
Use the ondrop attribute to decide what to do when the item is dropped on the zone. In the example below I log a message in the console:
<div ondragover=”allowDrop(event)” ondrop=”handleDrop()”> DROP ZONE </div>
<script>
allowDrop = (event) => {
event.preventDefault();
}
handleDrop = () => {
console.log(‘You dropped something!’);
}
</script>
That’s all, the basic drag and drop are set up now!
To add some additional features likw
ondrag start
ondragenter
ondragleave
You can now add some extra features with the ondragstart, ondragenter and ondragleave attributes. For instance, a nice feature with ondragenter and ondragleave would be to highlight the drop zone by adding and removing a custom css class of your choice (named dragging-over in the example below). Here is the full code:
<div
draggable=”true”
ondragstart=”handleDragStart()”>
DRAGGABLE ITEM
</div>
<div
ondragover=”allowDrop(event)”
ondrop=”handleDrop()”
ondragenter=”colorize(this)”
ondragleave=”uncolorize(this)”>
DROP ZONE
</div>
<script>
allowDrop = (event) => {
event.preventDefault();
}
handleDragStart = () => {
console.log(‘Started dragging’);
}
colorize = (element) => {
console.log(‘Entered the drop zone’);
element.classList.add(‘dragging-over’);
}
uncolorize = (element) => {
console.log(‘Left the drop zone’);
element.classList.remove(‘dragging-over’);
}
handleDrop = () => {
console.log(‘You dropped something!’);
}
</script>
Sometimes you don’t need to implement your own custom solution and a turnkey library can fit your project needs. Don’t reinvent the wheel if you don’t need to!
Reordering the DOM: introducing the Dragula library
Dragula lets you reorder elements of the DOM. In the following example I display the word “SMILE” and let the user move the letters around to form anagrams like “SLIME” or “MILES”.
The demo is coded with React but Dragula bridges are also available for Angular 1 and Angular 2.
As I am not using Webpack or any other tool to require Dragula, I use a <script> tag in the index.html file:
<html>
<head>
<meta charset=”UTF-8″ />
<title>Drag & Drop – Dragula for React</title>
<link rel=”stylesheet” href=”style.css”>
<link href=”bower_components/react-dragula/dist/dragula.min.css” rel=”stylesheet” type=”text/css”>
<!– Do not forget to import the Dragula style sheet –>
</head>
<body>
<div id=”anagram”></div>
<script src=”https://unpkg.com/react@latest/dist/react.js”></script>
<script src=”https://unpkg.com/react-dom@latest/dist/react-dom.js”></script>
<script src=”https://unpkg.com/babel-standalone@6.15.0/babel.min.js”></script>
<!– I use Babel to transform JSX to javascript –>
<script src=”bower_components/react-dragula/dist/react-dragula.js”></script>
<!– I previously installed react-dragula with Bower –>
</body>
</html>
Now let’s create a React component named Anagram and mount it on the div with the “anagram” id. Add a <script> tag to the body:
<script type=”text/babel”>
class Anagram extends React.Component {
render() {
return <div className=”anagram-container”>
<div className=”letter-outter-container”>
<div className=”letter-container”>S</div>
</div>
<div className=”letter-outter-container”>
<div className=”letter-container”>M</div>
</div>
<div className=”letter-outter-container”>
<div className=”letter-container”>I</div>
</div>
<div className=”letter-outter-container”>
<div className=”letter-container”>L</div>
</div>
<div className=”letter-outter-container”>
<div className=”letter-container”>E</div>
</div>
</div>;
}
};
ReactDOM.render(<Anagram/>, document.getElementById(‘anagram’));
</script>
The css classes letter-container and letter-outter-container are up to you. I wrapped the letter-container divs in order to get some spacing within letters without using margins because they generate glitches with Dragula. At this point I have something like this:
Server Hardening Linux: Knowing More About
Let us Read for you. In all businesses, knowledge plays a very important vital role. Hence, the security of your data or information is essential. The solution to protecting your knowledge lies in backing up the server and conducting periodic server hardening assessment. It keeps an exact copy of each version of a file, each time […]
Sleuth Kit
Let us Read for you. Sleuth Kit The Sleuth Kit is a C library forensic analysis tool and a collection command-line tool. This kit will let you examine your suspect computer file system in a non-intrusive manner. These tools are not dependent on the operating system to process, delete and hide the content of the […]
7 Facts about Amazon Web Services
Let us Read for you. 7 Facts about Amazon Web Services and AWS Firstly, let’s talk about what is it? 7 Facts about Amazon Web Services and AWS Cloud Computing- It is the base through which the network of the remote servers hosted on the internet to manage, store and process data rather than […]
Comments (0)