jQuery UI Drop Delete Effect on a Table Row

In this example below you will see how to do a jQuery UI Drop Delete Effect on a Table Row with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>jQuery UI Drop Delete Effect on a Table Row</title>
  
  
  <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>

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

  
</head>

<body>

  <h1>Demonstration of the jQuery UI Drop Effect on a Table Row</h1>

<h2>Just click a row --></h2>

<table cellpadding=0 cellspacing=0>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum repudiandae ratione </td>
    <td>sint illo deleniti labore suscipit aliquam voluptate ipsum ipsa ducimus at nesciunt incidunt molestias nemo quibusdam minima adipisci perspiciatis.</td>
 </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum repudiandae ratione </td>
    <td>sint illo deleniti labore suscipit aliquam voluptate ipsum ipsa ducimus at nesciunt incidunt molestias nemo quibusdam minima adipisci perspiciatis.</td>
 </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum repudiandae ratione </td>
    <td>sint illo deleniti labore suscipit aliquam voluptate ipsum ipsa ducimus at nesciunt incidunt molestias nemo quibusdam minima adipisci perspiciatis.</td>
 </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum repudiandae ratione </td>
    <td>sint illo deleniti labore suscipit aliquam voluptate ipsum ipsa ducimus at nesciunt incidunt molestias nemo quibusdam minima adipisci perspiciatis.</td>
 </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum repudiandae ratione </td>
    <td>sint illo deleniti labore suscipit aliquam voluptate ipsum ipsa ducimus at nesciunt incidunt molestias nemo quibusdam minima adipisci perspiciatis.</td>
 </tr>
    <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum repudiandae ratione </td>
    <td>sint illo deleniti labore suscipit aliquam voluptate ipsum ipsa ducimus at nesciunt incidunt molestias nemo quibusdam minima adipisci perspiciatis.</td>
 </tr>
    <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum repudiandae ratione </td>
    <td>sint illo deleniti labore suscipit aliquam voluptate ipsum ipsa ducimus at nesciunt incidunt molestias nemo quibusdam minima adipisci perspiciatis.</td>
 </tr>
    <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum repudiandae ratione </td>
    <td>sint illo deleniti labore suscipit aliquam voluptate ipsum ipsa ducimus at nesciunt incidunt molestias nemo quibusdam minima adipisci perspiciatis.</td>
 </tr>
</table>
  <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="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1Marc/jquery-ui-drop-delete-effect-on-a-table-row-LbEfs */
td {
  background: #777;
  padding:10px;
  margin: 0;
}

tr {
  display:block;
  border: 1px solid black;
}

/*Downloaded from https://www.codeseek.co/1Marc/jquery-ui-drop-delete-effect-on-a-table-row-LbEfs */
$("tr")
.click(function() {
  $(this).hide('drop', {direction: 'right'}, function() {
    $(this).remove();
  });
});

Comments