Drag and Drop using javascript with grabbable

Drag and Drop using javascript with grabbable
Drag and Drop using javascript with grabbable

Grabbable is a javascript. It is a JavaScript library mouse drag and drop facility. Your user resort group item through one mouse click.

HTML PAGE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src=grabbable.js</script>
</head>

<body>
<div class="box grabbable-parent">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>    
</div>

<script type="text/javascript">
!function(){
	document.querySelector(".grabbable-parent")
		.grabbable();
}()
</script>
</body>
</html>

STYLE CSS

[css autolinks="false" classname="myclass" collapse="false" firstline="1" gutter="true" highlight="1-3,6,9" htmlscript="false" light="false" padlinenumbers="false" smarttabs="true" tabsize="4" toolbar="true" title="style.css"]

*{ padding:0; margin:0;}
*{background:#FF0000;}
.box{
     display: flex;
	 flex-wrap: wrap;
	 width: 720px;
	padding: 40px;
	background-color: #fff;
	margin:0 auto;

    }

.item {
	display: inline-block;
	margin: 6px;
	width: 120px;
	height: 120px;
	border: 1px solid #c4c4c4;
	box-shadow: 0 0 9px rgba(0, 0, 0, 0.13);
	line-height: 120px;
	text-align: center;
	font-size: 44px;
	font-family:Arial, Helvetica, sans-serif;
	background:#FFFF00;
}
[/css]

I am attached CSS and Grabbable js in HTML page before the head close and querySelector function add in the HTML page before the body close. You can make own HTML and CSS page and add this js function. It is easy to use. Download this code and try again.

Saurav Sen

Saurav Sen

Hi, I am a professional blogger and web developer. So I also share experiences with web development tutorials and blogging tips and including writing about HTML, CSS, JavaScript, Jquery, Ajax, PHP, and MySQL.