{"id":5395,"date":"2021-12-27T04:50:46","date_gmt":"2021-12-27T04:50:46","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=5395"},"modified":"2021-12-27T06:05:10","modified_gmt":"2021-12-27T06:05:10","slug":"drag-drop-in-html-with-jquery","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/drag-drop-in-html-with-jquery\/","title":{"rendered":"Drag & Drop in HTML with jquery"},"content":{"rendered":"

HTML helps you in creating your own drag and drop options in dragging and dropping different widgets on the screen with jquery<\/a> as you want your website to look. So here is HTML code for making without wasting too much time and extra coding.<\/p>\n

HTML<\/h2>\n

<!DOCTYPE html>
\n<html lang=\"en\">
\n<head>
\n <title>Draggable Form<\/title>
\n <meta charset=\"utf-8\">
\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/3.3.7\/css\/bootstrap.min.css\">
\n <link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\" crossorigin=\"anonymous\" \/>
\n <link rel=\"stylesheet\" href=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.11.2\/themes\/smoothness\/jquery-ui.css\">
\n <link rel=\"stylesheet\" href=\"css\/dragSec.css\">
\n<\/head>
\n<body>
\n <div class=\"row nomrgn\" >
\n <div class=\"col-sm-3 nopadd h-100\">
\n <div id=\"modules\" class=\" col-sm-12 drag-field nopadd\">
\n <p class=\"drag col-sm-6\"><a class=\"btn btn-default\">Text<\/a><\/p>
\n <p class=\"drag col-sm-6\"><a class=\"btn btn-default\">Textarea<\/a><\/p>
\n <p class=\"drag col-sm-6\"><a class=\"btn btn-default\">Email<\/a><\/p>
\n <p class=\"drag col-sm-6\"><a class=\"btn btn-default\">Radio Button<\/a><\/p>
\n <\/div>
\n <\/div>
\n <div class=\"col-sm-9 nopadd h-100\">
\n <div id=\"dropzone\" class=\"col-sm-6\" style=\"background:#f2f2f2;\"><\/div>
\n\t <div id=\"dropzone1\" class=\"col-sm-6\"><\/div>
\n <\/div>
\n <\/div><\/p>\n

<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.1.0\/jquery.min.js\"><\/script>
\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.12.0\/jquery-ui.min.js\"><\/script>
\n <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.1\/js\/bootstrap.min.js\"><\/script>
\n <script src=\"js\/dragSec.js\"><\/script>
\n<\/body>
\n<\/html>
\n<\/code><\/p>\n

CSS<\/h3>\n

body, html, .row, .h-100, #modules, #dropzone{
\n\theight:100%;
\n}
\n.nomrgn{
\n\tmargin-left:0px !important;
\n\tmargin-right:0px !important;
\n}
\n.nopadd{
\n\tpadding:0px !important;
\n}
\n#modules {
\n background: #eee;
\n z-index: 1;
\n}
\n.drag-field {
\n\tpadding-top: 15px !important;
\n}
\n.drag-field a{
\n\twidth:100%;
\n}
\n#dropzone {
\n padding: 20px;
\n background: #fff;
\n z-index: 0;
\n}
\n.active {
\n outline: 1px solid red;
\n}
\n.hover {
\n outline: 1px solid blue;
\n}
\n.drop-item .remove {
\n\tdisplay: none;
\n}
\n.drop-item:hover .remove {
\n\tdisplay: inherit;
\n}
\n.remove {
\n\tbackground: no-repeat;
\n\tborder: none;
\n\tfont-size: 11px;
\n\tcolor: red;
\n}
\n.drop-item {
\n cursor: move;
\n margin-bottom: 10px;
\n background-color: rgb(255, 255, 255);
\n padding:20px;
\n border: 1px solid rgb(204, 204, 204);
\n position: relative;
\n}
\n.drop-item p {
\n\tcursor: pointer;
\n\tmargin: 0;
\n}
\n.drop-item .remove {
\n position: absolute;
\n top: 4px;
\n right: 4px;
\n}<\/code><\/p>\n

Jquery Code:<\/h3>\n

$('.drag').draggable({
\n appendTo: 'body',
\n helper: 'clone'
\n});
\n$('#dropzone').droppable({
\n activeClass: 'active',
\n hoverClass: 'hover',
\n accept: \":not(.ui-sortable-helper)\", \/\/ Reject clones generated by sortable
\n drop: function (e, ui) {
\n\t if(ui.draggable.text()==\"Textarea\")
\n\t {
\n\t\tvar $el = $('<div class=\"drop-item form-group\"><label><p onclick=\"editLabel(this)\">' + ui.draggable.text() + '<\/p><input type=\"text\" value=\"\" name=\"\" class=\"edit\" id=\"edit\" style=\"display: none;\"><\/label><textarea class=\"form-control\"\/><\/div>');
\n\t\t$el.append($('<button type=\"button\" class=\"remove\"><span class=\"glyphicon glyphicon-trash\"><\/span><\/button>').click(function () { $(this).parent().detach(); }));
\n\t\t$(this).append($el);
\n\t }
\n\t else if(ui.draggable.text()==\"Email\")
\n\t {
\n\t\tvar $el = $('<div class=\"drop-item form-group\"><label><p onclick=\"editLabel(this)\">' + ui.draggable.text() + '<\/p><input type=\"text\" value=\"\" name=\"\" class=\"edit\" id=\"edit\" style=\"display: none;\"><\/label><input class=\"form-control\" type=\"email\" \/><\/div>');
\n\t\t$el.append($('<button type=\"button\" class=\"remove\"><span class=\"glyphicon glyphicon-trash\"><\/span><\/button>').click(function () { $(this).parent().detach(); }));
\n\t\t$(this).append($el);
\n\t }
\n\t else if(ui.draggable.text()==\"Radio Button\")
\n\t {
\n\t\tvar $el = $('<div class=\"drop-item form-group\"><label><p onclick=\"editLabel(this)\">' + ui.draggable.text() + '<\/p><input type=\"text\" value=\"\" name=\"\" class=\"edit\" id=\"edit\" style=\"display: none;\"><\/label><div class=\"radio\"><label><input type=\"radio\" name=\"optradio\" checked>Option 1<\/label><\/div><\/div>');
\n\t\t$el.append($('<button type=\"button\" class=\"remove\"><span class=\"glyphicon glyphicon-trash\"><\/span><\/button>').click(function () { $(this).parent().detach(); }));
\n\t\t$(this).append($el);
\n\t }
\n\t else
\n\t {
\n\t\tvar $el = $('<div class=\"drop-item form-group\"><label><p onclick=\"editLabel(this)\">' + ui.draggable.text() + '<\/p><input type=\"text\" value=\"\" name=\"\" class=\"edit\" id=\"edit\" style=\"display: none;\"><\/label><input class=\"form-control\" type=\"text\" \/><\/div>');
\n\t\t$el.append($('<button type=\"button\" class=\"remove\"><span class=\"glyphicon glyphicon-trash\"><\/span><\/button>').click(function () { $(this).parent().detach(); }));
\n\t\t$(this).append($el);
\n\t }
\n }
\n}).sortable({
\n items: '.drop-item',
\n sort: function() {
\n $( this ).removeClass( \"active\" );
\n }
\n});
\nfunction editLabel(elm) {
\n\tvar jelm = $(elm);
\n\tvar htmlElm = jelm[0];
\n\t$(htmlElm).hide();
\n\t$(htmlElm).siblings('.edit').show();
\n\t$(htmlElm).siblings('.edit').focus()
\n\tvar initial_text = $(htmlElm).text();
\n\t$(htmlElm).siblings('.edit').focusout(function () {
\n\t\tvar editedInput = $(htmlElm).siblings('.edit').val();
\n\t\t$(htmlElm).siblings('.edit').hide();
\n\t\tif(editedInput != ''){
\n\t\t\t$(htmlElm).show().text(editedInput);
\n\t\t}
\n\t\telse{
\n\t\t\t$(htmlElm).show().text(initial_text);
\n\t\t} });}<\/code><\/p>\n

ScreenShot:<\/h3>\n

\"drag\"\/
\n\"drag1\"\/<\/p>\n

Drag-and-drop widgets let you easily:<\/h3>\n