Menu
I'm building a web app that uses a similar drag and drop metaphor that trello has for moving cards around by dragging and dropping cards from one list to another.
How can I do this?
845
React DnD is a perfect fit for apps like Trello, ProofHub, and ClickUp, which provide a UI for organizing your projects into different boards with drag and drop.
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 accordingly 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); } 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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With