How we make the custom Drag and Drop through pure Javascript code with HTML5.
If we used plugins for
Drag and Drop functionality then page is
very complex and load time is more. So, always used minimal Jquery plugin for
web page. We analayze, develop website minimum JS plugins used and clean, clear
and minimum css code using for webpage. Used new technology image like webP,svg
and progressive. Provide custom JS code for Drag and Drop.
Create two panel one is Drag location means which you have
Drag property like image and text and second is Drop location when you have put
the Image and text on desired location.
Simple copy the code and paste the code and check it.
<!DOCTYPE>
<html lang="eng">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Drag And Drop Functionalty With Custom JS
Code</title>
<style>
*{padding:0; margin:0;}
body{font-family:Arial, Helvetica, sans-serif;}
.container{margin:25px auto; width:1000px; box-shadow: 0px 0
10px #cacaca;}
.drag-box,.drop-box {width: 405px; float: left; border: 1px
solid #d8d8d8; padding:0px; box-sizing:border-box;}
.drag-box ul,.drop-box ul {list-style: none; padding: 0;
margin: 0; display: table;}
.drag-box ul li,.drop-box ul li {width: 133px; font-size: 14px;
line-height: 26px; color: #838383; font-weight:bold; border-right:1px solid
#d8d8d8; border-bottom:1px solid #d8d8d8; text-align: center; margin: 0; padding: 0; float: left; height:
98px;}
.drag-box ul li span,.drop-box ul li span {display:
table-cell; vertical-align: middle; height: 98px; text-align: center; width:
134px; cursor: pointer;}
.drop-box{margin-left:0%; float:right;}
</style>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.prevententDefault();
var data =
event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
function drop(event) {
event.preventDefault();
if (!event.target.getAttribute("ondrop"))
return false;
var data =
event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div class="container">
<div
class="drag-box">
<ul>
<li
id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"><span draggable="true"
ondragstart="drag(event)" id="drag1" >Dummu Text</span></li>
<li
id="div2" ondrop="drop(event)"
ondragover="allowDrop(event)"><span id="drag2" draggable="true"
ondragstart="drag(event)">Dummy Text</span></li>
<li
id="div3" ondrop="drop(event)"
ondragover="allowDrop(event)"><span id="drag3"
draggable="true" ondragstart="drag(event)">Dummy Text</span></li>
</ul>
</div>
<div
class="drop-box">
<ul>
<li
ondrop="drop(event)"
ondragover="allowDrop(event)"></li>
<li
ondrop="drop(event)"
ondragover="allowDrop(event)"></li>
<li
ondrop="drop(event)"
ondragover="allowDrop(event)"></li>
</ul>
</div>
</div>
</body>
</html>
Comments
Post a Comment