javascript - ejemplo - ¿Cómo puedo duplicar fácilmente el estilo trello de arrastrar y soltar de tarjetas?(Aplicación de estilo Kanban)
drag and drop js (2)
Estoy creando una aplicación web que utiliza una metáfora similar de arrastrar y soltar que tiene Trello para mover las cartas arrastrando y soltando cartas de una lista a otra.
¿Cómo puedo hacer esto?
El siguiente ejemplo utiliza jQuery UI "sortable" y CSS3 para hacer el efecto de arrastre de "inclinación" de Trello.
Puedes verlo aquí como un 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>
Una versión mejorada basada en la respuesta de Brad Parks en esta misma página con aún más sangría y un increíble efecto de inclinación hacia la dirección de arrastre como se muestra en esta página jsFiddle .
Diferentes bits en JavaScript siguen los comentarios:
$( ".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);
}
Modificaciones de CSS para diferentes grados de inclinación.
.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);
}