Drag and drop

Developer
Tushar Bandal
Size
2,459 Kb
Views
10,120
  1. Drag and drop Previews
  2. Drag and drop HTML Codes
  3. Drag and drop CSS Codes
  4. Drag and drop JS Codes

How do I make an drag and drop?

What is a drag and drop? How do you make a drag and drop? This script and codes were developed by Tushar Bandal on 19 December 2022, Monday.

Drag and drop Previews
IQ Test

Drag and drop - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Drag and drop </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h3>Drag and drop the blocks from middle box to any block.</h3>
<div id="acceptableArea" class="dragDropArea"> <div class="dragAreaPlaceholder"> <div class="blockBox">1</div> <div class="blockBox">2</div> <div class="blockBox">3</div> <div class="blockBox">4</div> <div class="blockBox">5</div> <div class="blockBox">6</div> <div class="blockBox">7</div> <div class="blockBox">8</div> <div class="blockBox">9</div> </div> <div class="dragBlock"> <div class="blockBox one" title="one" >1</div> <div class="blockBox two" title="two">2</div> <div class="blockBox three" title="three" >3</div> <div class="blockBox four" title="four" >4</div> <div class="blockBox five" title="five" >5</div> <div class="blockBox six" title="six" >6</div> <div class="blockBox seven" title="seven" >7</div> <div class="blockBox eight" title="eight" >8</div> <div class="blockBox nine" title="nine" >9</div> </div>
</div>
<div id="mostSuitedArea" class="dragDropArea"> <div class="dragAreaPlaceholder"> <div class="blockBox">1</div> <div class="blockBox">2</div> <div class="blockBox">3</div> <div class="blockBox">4</div> <div class="blockBox">5</div> <div class="blockBox">6</div> <div class="blockBox">7</div> <div class="blockBox">8</div> <div class="blockBox">9</div> </div> <div class="dragBlock"> <div class="blockBox one" title="one" >1</div> <div class="blockBox two" title="two">2</div> <div class="blockBox three" title="three" >3</div> <div class="blockBox four" title="four" >4</div> <div class="blockBox five" title="five" >5</div> <div class="blockBox six" title="six" >6</div> <div class="blockBox seven" title="seven" >7</div> <div class="blockBox eight" title="eight" >8</div> <div class="blockBox nine" title="nine" >9</div> </div>
</div>
<div id="failArea" class="dragDropArea"> <div class="dragAreaPlaceholder"> <div class="blockBox">1</div> <div class="blockBox">2</div> <div class="blockBox">3</div> <div class="blockBox">4</div> <div class="blockBox">5</div> <div class="blockBox">6</div> <div class="blockBox">7</div> <div class="blockBox">8</div> <div class="blockBox">9</div> </div> <div class="dragBlock"> <div class="blockBox one" title="one" >1</div> <div class="blockBox two" title="two">2</div> <div class="blockBox three" title="three" >3</div> <div class="blockBox four" title="four" >4</div> <div class="blockBox five" title="five" >5</div> <div class="blockBox six" title="six" >6</div> <div class="blockBox seven" title="seven" >7</div> <div class="blockBox eight" title="eight" >8</div> <div class="blockBox nine" title="nine" >9</div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://code.jquery.com/ui/1.10.3/jquery-ui.js'></script> <script src="js/index.js"></script>
</body>
</html>

Drag and drop - Script Codes CSS Codes

.dragDropArea { line-height: 25px; font-weight: bold; text-align: center; color: #cccccc; font-size: 15px; float: left; padding: 13px 0 6px 14px; width: 229px; border: 2px dashed #000; margin-left: 18px; position: relative; } .dragDropArea .blockBox{ float: left; border: 1px solid #bbbbbb; width: 65px; height: 28px; margin: 0 7px 6px 0; box-shadow: inset 0 1px 3px rgba(0,0,0,.05); } .dragBlock { position: absolute; left: 14px; top: 13px; width: 100%; } .dragBlock .blockBox.deActive{ z-index: -10; } .dragBlock .blockBox.activeBlock { background: #D1CECE; color: #666666; z-index: 1; } .dragBlock .blockBox.ui-draggable-dragging { background: #dadada; color: #666666; z-index: 2; } .deActive.ui-draggable-dragging { opacity: 0; filter:alpha(opacity=0); }
#acceptableArea { margin: 0
}

Drag and drop - Script Codes JS Codes

$(function() { var dragBlockValue var stopDrag $( "#mostSuitedArea .dragBlock .blockBox").addClass('activeBlock') $( "#acceptableArea .dragBlock .blockBox").addClass('deActive') $( "#failArea .dragBlock .blockBox").addClass('deActive') $( ".dragBlock" ).droppable({ drop: function( event, ui ) { $('.dragBlock .'+dragBlockValue).removeClass('activeBlock').addClass('deActive'); stopDrag = $('.dragBlock .'+dragBlockValue); $(this).find('div.'+dragBlockValue).addClass('activeBlock').removeClass('deActive'); }, cancel: "#mostSuitedArea .deActive" }); $( ".blockBox" ).draggable({ drag: function(){ dragBlockValue = $(this).draggable().attr("title"); }, revert: true, cursor: "move" }); });
Drag and drop - Script Codes
Drag and drop - Script Codes
Home Page Home
Developer Tushar Bandal
Username tusharbandal
Uploaded December 19, 2022
Rating 3
Size 2,459 Kb
Views 10,120
Do you need developer help for Drag and drop?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tushar Bandal (tusharbandal) Script Codes
Name
Accordian
A Pen by tushar bandal
Sticky footer
CSS3 Menu
Tic Tac Toe game
CSS3 Gallery
Photo gallery
Mobile Accordion
Nav to scroll sections
Custom Select Box
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!