JS table row drag and drop without Jquery UI in 2016

Developer
Asakasinsky
Size
3,189 Kb
Views
22,264
  1. JS table row drag and drop without Jquery UI in 2016 Previews
  2. JS table row drag and drop without Jquery UI in 2016 HTML Codes
  3. JS table row drag and drop without Jquery UI in 2016 CSS Codes
  4. JS table row drag and drop without Jquery UI in 2016 JS Codes

How do I make an js table row drag and drop without jquery ui in 2016?

What is a js table row drag and drop without jquery ui in 2016? How do you make a js table row drag and drop without jquery ui in 2016? This script and codes were developed by Asakasinsky on 27 December 2022, Tuesday.

JS table row drag and drop without Jquery UI in 2016 Previews
IQ Test

JS table row drag and drop without Jquery UI in 2016 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JS table row drag and drop without Jquery UI in 2016</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="recipe"> <div class="recipe__info"> <h2 class="recipe__title">Banana muffins recipe</h2> <p>These healthy muffins are the perfect treat for when you are feeling something sweet. It is so much better to bake muffins yourself as you can choose exactly what you put in them, meaning you can stay away from refined sugars and preservatives! These are perfect for bringing to a brunch or just sharing with your friends. </p> </div> <div class="recipe__ingredients"> <table cellpadding="0" cellspacing="0" border="0" class="recipe-table" id="recipeTable"> <tbody id="recipeTableBody"> <tr> <td class="drag-handler"></td> <td class="recipe-table__cell"> <input type="text" class="recipe__text-field" value="Large bananas" placeholder="Ingredient"> </td> <td class="recipe-table__cell"> <input type="text" class="recipe__text-field" value="3" placeholder="Value"> </td> <td class="recipe-table__cell"> <button class="recipe-table__del-row-btn">x</button> </td> </tr> <tr> <td class="drag-handler"></td> <td class="recipe-table__cell"> <input type="text" class="recipe__text-field" value="White sugar" placeholder="Ingredient"> </td> <td class="recipe-table__cell"> <input type="text" class="recipe__text-field" value="¹⁄₂" placeholder="Value"> </td> <td class="recipe-table__cell"> <button class="recipe-table__del-row-btn">x</button> </td> </tr> <tr> <td class="drag-handler"></td> <td class="recipe-table__cell"> <input type="text" class="recipe__text-field" value="Egg" placeholder="Ingredient"> </td> <td class="recipe-table__cell"> <input type="text" class="recipe__text-field" value="1" placeholder="Value"> </td> <td class="recipe-table__cell"> <button class="recipe-table__del-row-btn">x</button> </td> </tr> </tbody> </table> <div class="recipe-table__add-row"> <span class="recipe-table__add-row-btn">+</span> </div> </div>
</div>
<script id="rowTemplate" type="text/template"> <tr> <td class="drag-handler"></td> <td class="recipe-table__cell"> <input type="text" class="recipe__text-field" value="" placeholder="Ingredient"> </td> <td class="recipe-table__cell"> <input type="text" class="recipe__text-field" value="" placeholder="Value"> </td> <td class="recipe-table__cell"> <button class="recipe-table__del-row-btn">x</button> </td> </tr>
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://rubaxa.github.io/Sortable/Sortable.js'></script> <script src="js/index.js"></script>
</body>
</html>

JS table row drag and drop without Jquery UI in 2016 - Script Codes CSS Codes

body { font-size: 14px;
}
.recipe { padding: 1em;
}
.recipe__title { margin-top: 0;
}
.recipe__info { vertical-align: top; text-align: right; padding: 0 1em 0 0; margin: 0 1.3em 0 0; font-weight: bold; color: #454545; border-right: 1px dotted #EEE; width: 300px; float: left;
}
.recipe__ingredients { float: left;
}
.recipe-table { position: relative; padding: 1em; border: 1px solid #DDD; box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.5); z-index: 10;
}
.recipe-table__cell { vertical-align: top; padding: 3px 5px;
}
.recipe__text-field { margin:0; padding: .45em 0.92em; font-size: 1em; line-height: 1.4; color: #555555; background-color: #FFF; background-image: none; border: 1px solid #CCC; border-left:1px solid #CCC;
}
.recipe-table__add-row { margin-top: 0; position: relative; border-top: 1px solid #EEE; z-index: 8;
}
.recipe-table__add-row-btn { display: block; cursor: pointer; position: absolute; right: 0; left: 0; width: 4em; margin: 0 auto; -webkit-transition: all .2s easy-in; transition: all .2s easy-in; text-align: center; opacity: 0.5; color: #fff; border: 1px solid #16A085; border-bottom-right-radius: 1em; border-bottom-left-radius: 1em; background: #16A085; height: 1.5em; line-height: 1.5em;
}
.recipe-table__add-row-btn:hover { opacity: 1;
}
.recipe-table__del-row-btn { cursor: pointer; display: inline-block; padding: .45em 0.92em; font-size: 1em; line-height: 1.4; border: 1px solid #F39C12; color: #F39C12; text-decoration: none; transition: all .3s; text-align: center; background-color: #fff;
}
.recipe-table__del-row-btn:hover { background: #F39C12; color: #fff;
}
.drag-handler { width: 1.4em; position: relative; background-color: #E4E6EB; background-image: linear-gradient(45deg, #E4E6EB, #E4E6EB 2px, #fff 2px, #fff 4px, #E4E6EB 4px, #E4E6EB 9px, #fff 9px, #fff 11px, #E4E6EB 11px, #E4E6EB 16px, #fff 16px, #fff 18px, #E4E6EB 18px, #E4E6EB 22px); background-size: 10px 20px; cursor: move; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF;
}
.drag-handler:active { background-image: linear-gradient(45deg, #bab86c, #bab86c 2px, #fff 2px, #fff 4px, #bab86c 4px, #bab86c 9px, #fff 9px, #fff 11px, #bab86c 11px, #bab86c 16px, #fff 16px, #fff 18px, #bab86c 18px, #bab86c 22px); background-size: 10px 20px;
}

JS table row drag and drop without Jquery UI in 2016 - Script Codes JS Codes

$(document).ready(function () { $(document).on('click', '.recipe-table__add-row-btn', function (e) { var $el = $(e.currentTarget); var $tableBody = $('#recipeTableBody'); var htmlString = $('#rowTemplate').html(); $tableBody.append(htmlString); return false; }); $(document).on('click', '.recipe-table__del-row-btn', function (e) { var $el = $(e.currentTarget); var $row = $el.closest('tr'); $row.remove(); return false; }); Sortable.create( $('#recipeTableBody')[0], { animation: 150, scroll: true, handle: '.drag-handler', onEnd: function () { console.log('More see in https://github.com/RubaXa/Sortable'); } } );
});
JS table row drag and drop without Jquery UI in 2016 - Script Codes
JS table row drag and drop without Jquery UI in 2016 - Script Codes
Home Page Home
Developer Asakasinsky
Username asakasinsky
Uploaded December 27, 2022
Rating 3
Size 3,189 Kb
Views 22,264
Do you need developer help for JS table row drag and drop without Jquery UI in 2016?

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!

Asakasinsky (asakasinsky) Script Codes
Name
A Pen by asakasinsky
Tear-able Cloth
Comment reader
Seconds counter
Icon Fonts - SocialCount meets Style
Seamless scroll animation
Odin-Ass-style jQuery
Icon Fonts - emocons.js jQuery plugin
Modernizr.custom.js
Bokeh Modal
Create amazing captions 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!