Add delete drag and drop

In this example below you will see how to do a Add delete drag and drop with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by MasParaSol, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MasParaSol ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Add delete drag and drop</title>
  
  
  <link rel='stylesheet prefetch' href='http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <input type="button" value="Add" onclick="addRow('Babyfood GERBER 2nd Foods apple carrot and squash organic','1 cup',50)">
<input type="button" value="Add" onclick="addRow('Apple','1 medium',10)">
<input type="button" value="Add" onclick="addRow('Pear','1 large',5)">


<div id="foodlist" class="foodlist">
<input type="text" id="foodlistname" name="foodlistname" value="Untitled List">

<div id="foodtotals"></div>
  
</div>
  <script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.4/jquery-ui.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/MasParaSol/add-delete-drag-and-drop-aVgWpP */
body{font:roboto;}

.foodlist {border:1px solid #005db3; padding:5px;width:300px;background-color: #5190c0;height:300px;overflow-y:scroll;}

#foodlist input[type=text] {
    width: 100%;
    padding: 12px 10px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #5190c0;
    outline: none;
  background-color:#5190c0;
  color:#fff;
  font-size:18px;

}

#foodlist input[type=text]:focus {
    background-color: #70A4CB;
}

.foodbox {color:#666;text-decoration: none;border-bottom: 1px solid #ddd;background-color:#fefefe;border-radius:5px;width:100%;margin:10px 0px 5px 0px;}

.foodname {padding:10px 15px;}
.servsize {border-top: 1px solid #ddd;background-color:#fefefe;padding-top:3px;padding:10px 15px;}

.deletebutton {float:right;display:inline;margin:5px 3px 0px 0px;color:#666666;}

#foodtotals ul {list-style: none;padding:0;margin:0;display:inline-block;background-color:#43769E;}
#foodtotals li {display:inline-block;text-align:center;border:1px dotted #c4c4c4;border-radius:3px;padding:5px 10px 0px 10px;width:38px;color:#fcfcfc;}

#foodbox ul {list-style: none;padding:0;margin:0;display:inline-block;}
#foodbox li {display:inline-block;text-align:center;border-top:1px dotted #999;border-right:1px dotted #999;border-left:1px dotted #999;border-radius:3px;padding:5px 10px 0px 10px;width:38px;}


/*Downloaded from https://www.codeseek.co/MasParaSol/add-delete-drag-and-drop-aVgWpP */
var tn1=0;
function addRow(fooditem,servsize,n1,n2,n3,n4,n5) {
    var div = document.createElement('div');
    div.className = 'row';

    div.innerHTML = '<input class="deletebutton" type="button" value="X" onclick="sub('+n1+'); removeRow(this);"><div class="foodbox" id="foodbox"><div class="foodname">'+fooditem+'</div>\
    <div class="servsize">'+servsize+'</div>\
<ul><li>'+n1+'<br/>Cal</li><li>50%<br/>Prt</li><li>30%<br/>Carb</li><li>30%<br/>Fat</li><li>30%<br/>VitC</li></ul></div>';

document.getElementById('foodlist').appendChild(div);
// Convert string input to numbers

n1 = parseFloat(n1);
tn1 = tn1 + n1;
foodtotals.innerHTML = '<ul><li>'+tn1+'<br/>Cal</li><li>50%<br/>Prt</li><li>30%<br/>Carb</li><li>30%<br/>Fat</li><li>30%<br/>VitC</li></ul>';

}

function removeRow(input) {
    document.getElementById('foodlist').removeChild( input.parentNode ); }
  
function sub(n1) {
n1 = parseFloat(n1);
tn1 = tn1 - n1;
foodtotals.innerHTML = '<ul><li>'+tn1+'<br/>Cal</li><li>50%<br/>Prt</li><li>30%<br/>Carb</li><li>30%<br/>Fat</li><li>30%<br/>VitC</li></ul>';
}

Comments