Drag and Drop

Developer
Larry Geams Parangan
Size
2,248 Kb
Views
28,336
  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?

Make your navigation sortable using jQuery.. What is a drag and drop? How do you make a drag and drop? This script and codes were developed by Larry Geams Parangan on 13 September 2022, Tuesday.

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> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Rearrange by dragging the list</h1>
<ul id="sortable"> <li class="item-1">Item 1</li> <li class="item-2">Item 2</li> <li class="item-3">Item 3</li> <li class="item-4">Item 4</li> <li class="item-5">Item 5</li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Drag and Drop - Script Codes CSS Codes

body{ margin: 0px; padding: 0px; background: #1abc9c; font-family: 'Lato',sans-serif;
}
h1{ color: #fff; text-align: center; margin-top: 2em;
}
ul{ list-style: none; margin-top: 2em;
}
ul li{ color: #fff; padding: 20px; width: 600px; margin: 0px auto; cursor: pointer;
}
ul li.item-1{ background: #e74c3c }
ul li.item-2{ background: #3498db }
ul li.item-3{ background: #f39c12 }
ul li.item-4{ background: #27ae60 }
ul li.item-5{ background: #9b59b6 }
.ui-sortable-placeholder{ border: 1px dotted; padding: 30px 20px;
}
/*font face*/
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 100; src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400;

Drag and Drop - Script Codes JS Codes

 $(function() { $( "#sortable" ).sortable({ placeholder: "ui-sortable-placeholder" }); });
Drag and Drop - Script Codes
Drag and Drop - Script Codes
Home Page Home
Developer Larry Geams Parangan
Username larrygeams
Uploaded September 13, 2022
Rating 4.5
Size 2,248 Kb
Views 28,336
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!

Larry Geams Parangan (larrygeams) Script Codes
Name
One Page Navigation
Simple E-Commerce
Slide Toggle Navigation
CSS3 Loading Disk
The Android Story
Just Flat
See Through
Browser Detection - Google Chrome
Pure CSS Login Form
Pure CSS Checklist Icon
Create amazing love letters 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!