Comment puis-je facilement dupliquer le trello style de glisser et déposer des cartes? (Kanban application de style)

Je suis en train de construire une application web qui utilise un semblable glisser et de déposer la métaphore que trello est pour les cartes mobiles par glisser-déposer les cartes à partir d'une liste à l'autre.

Comment puis-je faire cela?

Une autre solution possible est ce Réagir/Redux exemple sur Github

InformationsquelleAutor Brad Parks | 2014-01-19

Une version améliorée construit sur Brad Parks-s droit de réponse sur cette page mettant en vedette encore plus tiret et un impressionnant tilt-vers-le glisser en direction de l'effet, comme l'ont démontré sur cette page jsFiddle.

Différents bits en JavaScript suivre les commentaires:

$( ".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 pour les différents degrés d'inclinaison

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

Comment sérialiser les balises div/portlet à la fin et voir la liste duquel il appartient à... ?
merci de faire une nouvelle question sur le site et d'élaborer et de généraliser un peu quel est votre but

InformationsquelleAutor Jaak Kütt

L'exemple suivant utilise jQuery UI "sortable" et CSS3 pour faire le Trello "tilt" faites glisser l'effet.

Vous pouvez découvrez-le ici comme 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>

si vous êtes déjà en fournissant un exemple de travail en violon pourquoi ne pas essayer de mettre en évidence les principaux aspects de vos intentions dans le code et de réduire le "dumping de l'ensemble de la page html"look-and-feel de votre réponse 😀
eh bien... parce que je n'ai pas écrit la plupart de celui-ci... C'est vraiment juste de 90% de la copie de jQuery UI Sortable démo trouvé ici, avec un supplément d'événements javascript pour faire de l'inclinaison de l'effet. Maintenant, lorsque les gens de google "trello carte effet javascript", ils vont obtenir cet échantillon, qui est plus que ce que je suis 😉
S'il vous plaît ajouter une explication de la solution.

InformationsquelleAutor Brad Parks

Vous devez vous connecter pour publier un commentaire.