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 JavaScript library mouse drag and drop facility. Your user resort group item though 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

*{ 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;
}

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.

 

Download Now