Drag'n Drop Demo

Developer
Ash Blue
Size
2,665 Kb
Views
50,600
  1. Drag'n Drop Demo Previews
  2. Drag'n Drop Demo HTML Codes
  3. Drag'n Drop Demo CSS Codes
  4. Drag'n Drop Demo JS Codes

How do I make an drag'n drop demo?

Quick'n fancy drag'n drop demo with everything needed for a basic CMS front-end.. What is a drag'n drop demo? How do you make a drag'n drop demo? This script and codes were developed by Ash Blue on 18 July 2022, Monday.

Drag'n Drop Demo Previews
IQ Test

Drag'n Drop Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Drag'n Drop Demo</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>Drag'n Drop Demo <small>jQuery UI and Bootstrap</small></h1> <form role="form"> <div class="form-group"> <input class="form-control" type="text" name="name" placeholder="Title" /> </div> <details> <div class="form-group"> <input class="form-control" type="text" name="blah" placeholder="Additional details here" /> </div> </details> </form> <div class="row"> <div class="col-sm-6"> <div id="modules"> <p class="drag"><a class="btn btn-default">Text</a></p> <p class="drag"><a class="btn btn-default">Textarea</a></p> <p class="drag"><a class="btn btn-default">Number</a></p> </div> </div> <div class="col-sm-6"> <div id="dropzone"></div> <button class="btn btn-primary pull-right">Save</button> </div> </div>
</div> <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='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Drag'n Drop Demo - Script Codes CSS Codes

#modules { padding: 20px; background: #eee; margin-bottom: 20px; z-index: 1; border-radius: 10px;
}
#dropzone { padding: 20px; background: #eee; min-height: 100px; margin-bottom: 20px; z-index: 0; border-radius: 10px;
}
.active { outline: 1px solid red;
}
.hover { outline: 1px solid blue;
}
.drop-item { cursor: pointer; margin-bottom: 10px; background-color: rgb(255, 255, 255); padding: 5px 10px; border-radisu: 3px; border: 1px solid rgb(204, 204, 204); position: relative;
}
.drop-item .remove { position: absolute; top: 4px; right: 4px;
}

Drag'n Drop Demo - Script Codes JS Codes

$('.drag').draggable({ appendTo: 'body', helper: 'clone'
});
$('#dropzone').droppable({ activeClass: 'active', hoverClass: 'hover', accept: ":not(.ui-sortable-helper)", // Reject clones generated by sortable drop: function (e, ui) { var $el = $('<div class="drop-item"><details><summary>' + ui.draggable.text() + '</summary><div><label>More Data</label><input type="text" /></div></details></div>'); $el.append($('<button type="button" class="btn btn-default btn-xs remove"><span class="glyphicon glyphicon-trash"></span></button>').click(function () { $(this).parent().detach(); })); $(this).append($el); }
}).sortable({ items: '.drop-item', sort: function() { // gets added unintentionally by droppable interacting with sortable // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options $( this ).removeClass( "active" ); }
});
Drag'n Drop Demo - Script Codes
Drag'n Drop Demo - Script Codes
Home Page Home
Developer Ash Blue
Username ashblue
Uploaded July 18, 2022
Rating 4.5
Size 2,665 Kb
Views 50,600
Do you need developer help for Drag'n Drop Demo?

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!

Ash Blue (ashblue) Script Codes
Name
JavaScript Anagram Generator Alpha
HTML5 Editable Table
Pure CSS Responsive Modal
CSS Sprite Animation
Overflowing Gallery
A Pen by Ash Blue
HTML5 Canvas Progress Bar
CSS Zoom Icon
CSS Arrows
JavaScript Anagram Algorithm Explanation
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!