How can I easily duplicate the trello style of drag and drop of cards? (Kanban style app) [closed] How can I easily duplicate the trello style of drag and drop of cards? (Kanban style app) [closed] javascript javascript

How can I easily duplicate the trello style of drag and drop of cards? (Kanban style app) [closed]


An upgraded version built upon Brad Parks-s answer right on this very page featuring even more indent and an awesome tilt-towards-drag-direction effect as demonstrated on this jsFiddle page.

Different bits in JavaScript follow the comments:

$( ".column" ).sortable({    connectWith: ".column",    handle: ".portlet-header",    cancel: ".portlet-toggle",    start: function (event, ui) {        ui.item.addClass('tilt');        // Start monitoring tilt direction        tilt_direction(ui.item);    },    stop: function (event, ui) {        ui.item.removeClass("tilt");        // Unbind temporary handlers and excess data        $("html").unbind('mousemove', ui.item.data("move_handler"));        ui.item.removeData("move_handler");    }});// Monitor tilt direction and switch between classes accordinglyfunction 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);}  

CSS modifications for different tilt degrees

.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);}


The following example uses jQuery UI "sortable" and CSS3 to do the Trello "tilt" drag effect.

You can check it out here as a jsfiddle:

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>jQuery UI Sortable - Portlets</title>  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">  <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>  <style>  .tilt {    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;  }  </style>  <script>  $(onPageLoad);  function onPageLoad()  {    $( ".column" ).sortable({      connectWith: ".column",      handle: ".portlet-header",      cancel: ".portlet-toggle",      start: function (event, ui) {        ui.item.addClass('tilt');      },      stop: function (event, ui) {        ui.item.removeClass('tilt');      }    });    $( ".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();    });  }  </script></head><body><div class="column">  <div class="portlet">    <div class="portlet-header">Feeds</div>    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div>  <div class="portlet">    <div class="portlet-header">News</div>    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div></div><div class="column">  <div class="portlet">    <div class="portlet-header">Shopping</div>    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div></div><div class="column">  <div class="portlet">    <div class="portlet-header">Links</div>    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div>  <div class="portlet">    <div class="portlet-header">Images</div>    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div></div></body></html>