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')">


<div id="column" class="column">
  
  </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-eeaKNK */
.tilt.right {
    transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
}
.tilt.left {
    transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
}
body {
    min-width: 520px;
}
.column {
    width: 170px;
    float: left;
    padding-bottom: 100px;
}
.portlet {
    margin: 0 1em 1em 0;
    padding: 0.3em;
}
.portlet-header {
    padding: 0.2em 0.3em;
    margin-bottom: 0.5em;
    position: relative;
}
.portlet-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
}
.portlet-content {
    padding: 0.4em;
}
.portlet-placeholder {
    border: 1px dotted black;
    margin: 0 1em 1em 0;
    height: 50px;
}

.column {border:1px solid;}
.portlet {boder:3px solid blue;}

/*Downloaded from https://www.codeseek.co/MasParaSol/add-delete-drag-and-drop-eeaKNK */
function addRow(fooditem,servsize) {
    var div = document.createElement('div');
    div.className = 'row';

    div.innerHTML = '<div class="portlet"><div class="portlet-header">'+fooditem+'</div><div class="portlet-content">'+servsize+'</div></div><input type="button" value="Delete" onclick="removeRow(this)">';

document.getElementById('column').appendChild(div);
}

function removeRow(input) {
    document.getElementById('column').removeChild( input.parentNode );
}

/************/
//End Adding and Deleting Foods//
/************/
/***********/
//Begin Sorting the Foods With Drag and Drop
/***********/
$( ".column" ).sortable({
    connectWith: ".column",
    handle: ".portlet-header",
    cancel: ".portlet-toggle",
    start: function (event, ui) {
        ui.item.addClass('tilt');
        tilt_direction(ui.item);
    },
    stop: function (event, ui) {
        ui.item.removeClass("tilt");
        $("html").unbind('mousemove', ui.item.data("move_handler"));
        ui.item.removeData("move_handler");
    }
});

function tilt_direction(item) {
    var left_pos = item.position().left,
        move_handler = function (e) {
            if (e.pageX >= left_pos) {
                item.addClass("right");
                item.removeClass("left");
            } else {
                item.addClass("left");
                item.removeClass("right");
            }
            left_pos = e.pageX;
        };
    $("html").bind("mousemove", move_handler);
    item.data("move_handler", move_handler);
}  

$( ".portlet" )
    .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
    .find( ".portlet-header" )
    .addClass( "ui-widget-header ui-corner-all" )
    .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");

$( ".portlet-toggle" ).click(function() {
    var icon = $( this );
    icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
    icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
});

Comments