24/7 Customer Support
21Jun 2017

0

873

0

Adding Drag & Drop to Your Web App, the Simple Way -Dragula

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:

Comments (0)