web-dev-qa-db-fra.com

jQuery triable et dressable

Je souhaite avoir une liste qui est triable, mais je souhaite également que les éléments de cette liste soient dressés aux DIV que j'ai définis comme dressable. Je n'arrive pas à trouver un moyen de le faire. Des idées?

jqueryjquery-ui-sortablejquery-ui-draggablejquery-ui-droppable
27
Colin

Voici une version simplifiée de la solution de Colin.

La plus grande différence est que cette solution ne stocke pas l'ensemble du code HTML des éléments triables, mais uniquement l'article actuellement glissé. Il est ensuite inséré dans sa position d'origine si l'élément est tombé sur la zone dressée.

Quoi qu'il en soit, voici le code:

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    var dropped = false;
    var draggable_sibling;

    $("#sortable").sortable({
        start: function(event, ui) {
            draggable_sibling = $(ui.item).prev();
        },
        stop: function(event, ui) {
            if (dropped) {
                if (draggable_sibling.length == 0)
                    $('#sortable').prepend(ui.item);

                draggable_sibling.after(ui.item);
                dropped = false;
            }
        }
    });

    $(".droppable").droppable({
        activeClass: 'active',
        hoverClass:'hovered',
        drop:function(event,ui){
            dropped = true;
            $(event.target).addClass('dropped');
        }
    });
});

</script>

<style type="text/css">
#sortable li{
    clear:both;
    float:left;
}

.droppable {
    clear:both;
    height:300px;
    width:400px;
    background-color:#CCC;
}

.droppable.active { background: #CFC; }
.droppable.hovered { background: #CCF; }
.dropped { background: #f52; }
</style>

</head>
<body>

<ul id="sortable">
    <li id="one">One</li>
    <li id="two">Two</li>
    <li id="three">Three</li>
    <li id="four">Four</li>
    <li id="five">Five</li>
    <li id="six">Six</li>
</ul>

<div class="droppable">Drop Here</div>
<div class="droppable">Drop Here</div>

</body>
</html>

Il subit toujours le même problème que la solution de Colin si un élément est entraîné dans une nouvelle position dans la liste, puis déposé à l'extérieur de la fois <ul> et le goutte dressable <div>. L'élément ne sera alors pas réinitialisé mais prenez la dernière position dans la liste (testée dans Google Chrome). Quoi qu'il en soit, cela est facilement résolu avec une certaine souris sur la détection ou peut même être un comportement souhaitable.

22
Reimund

Pas exactement ce que vous avez demandé, mais j'avais besoin d'un conteneur initial où les articles pouvaient être déplacés vers un autre conteneur de tri et pensé que je devrais le partager. C'était comme ça que je l'ai atteint (JQuery 1.8.3):

$("#sortable-list").sortable();
$("#initial-list div").draggable({
  revert: true,
  revertDuration: 0
});

$("#initial-list").droppable({
  accept: ".item-selected",
  drop: function(e, ui) {
    var dropped = ui.draggable;
    var droppedOn = $(this);
    var itemInOtherList = $(this).children("#" + dropped.attr('id'));
    itemInOtherList.removeClass('ui-state-disabled').draggable({ disabled: false });
    dropped.remove();
  }
});
$("#sortable-list").droppable({
  accept: ".item-initial",
  drop: function(e, ui) {
    var dropped = ui.draggable;
    var droppedOn = $(this);
    droppedOn.append(dropped.clone()
      .removeAttr('style')
      .removeClass("item-initial")
      .addClass("item-selected"));
    dropped.animate(dropped.data().origPosition, {
      complete: function() {
        $(this).addClass('ui-state-disabled').draggable({ disabled: true });
      }
    });
  }
});

Jsfiddle: http://jsfiddle.net/muskar/dwz4mvxa/8/

1
Aske B.

J'ai passé toute la journée à ce sujet et je suis beaucoup plus proche, mais je ne fais toujours pas aussi bien que j'aimerais. J'ai maintenant la fonctionnalité dont j'ai besoin, mais une erreur JavaScript est lancée.

Le problème consiste à obtenir la liste de tri pour revenir à sa position précédente si l'élément est supprimé dans le goutte dressable, plutôt que dans la liste. Actuellement, je sauve le HTML Onmousedown, puis réécrivez le HTML dans la fonction Drop of the Dresspable. Cela fonctionne, mais cela me donne une variable jQuery est une erreur nulle. Quelqu'un peut-il trouver une meilleure solution?

Code:

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <script type="text/javascript">

var templateHtml;
$(document).ready(function(){

    $("#sortable").sortable();
    $("#sortable li").addClass("drop").bind('mousedown',function(){
        templateHtml = $("#sortable").html();
    });
    $("#droppable").droppable({
        activeClass: 'active',
        hoverClass:'hovered',
        accept:".drop",
        drop:function(event,ui){
            $("#sortable").sortable('destroy').html(templateHtml);
            $("#sortable").sortable();
            $("#sortable li").addClass("drop").bind('mousedown',function(){
                templateHtml = $("#sortable").html();
            });          
        }
    });

});

    </script>
    <style type="text/css">
    #sortable li{
        clear:both;
        float:left;
    }

    #droppable {
        clear:both;
        height:300px;
        width:400px;
        background-color:#CCC;
    }
    #droppable.active {
        background-color:#CFC;
    }
    #droppable.hovered {
        background-color:#CCF;
    }
    </style>

</head>
<body>

<ul id="sortable">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
<li id="six">Six</li>
</ul>

<div id="droppable">
Drop Here
</div>

</body>
0
Colin

A pu obtenir un résultat de fin similaire en faisant de la cible de la cible divs leurs propres tri.

Je suis alors via Connecwith, a fait toutes les sortes de morts capables de se connecter et de partager des draggables.

Quelque chose comme:

var connects = '#main_sortable, div.target';
$('#main_sortable').sortable({ connectWith: connect });
$('div').sortable({ connectWith: connect} );
0
mikeycgto