jQuery Sortable - glisser-déposer de plusieurs éléments

J'ai le code suivant qui permet à l'utilisateur de glisser-déposer à partir d'une liste à l'autre. Maintenant, comment puis-je permettre à l'utilisateur de sélectionner et de drag & drop plusieurs articles?

Quelque chose comme cela?
http://jsfiddle.net/T68Fn/

J'ai essayé d'incorporer le code de la jsfiddle, mais ne peut pas vraiment le faire fonctionner. Toute aide est très appréciée.

Merci de m'aider. Je vous remercie beaucoup.

HTML

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

</head>
<body>
  <div id="maincontainer">
   <div id="navtoplistline">&nbsp;</div>
      <div id="contentwrapper">
        <div id="maincolumn">
           <div class="text">
            <hr />
            <div class="listBlock">
                    <h2>Available</h2>

                <ul id="sortable1" class='droptrue'>
                    <li class="ui-state-default" id="article_1">Article #1</li>
                    <li class="ui-state-default" id="article_2">Article #2</li>
                    <li class="ui-state-default" id="article_3">Article #3</li>
                </ul>
            </div>
            <div class="listBlock">
                    <h2>My Articles</h2>

                <ul id="sortable2" class='droptrue'></ul>
            </div>
            <br clear="both" />
            <p>Which articles, in which order?:
                <br />
                <input type="text" id="postOrder" name="postOrder" value="" size="30" />
            </p>
        </div>
    </div>
   </div>
  </div>
</body>
</html>

CSS

.listBlock {
  float: left;
}
#sortable1, #sortable2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-right: 100px;
  background: #eee;
  padding: 5px;
  width: 300px;
  border: 1px solid black;
}
#sortable1 li, #sortable2 li {
  cursor: move;
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 250px;
  background: none;
  background-color: white;
}

SCRIPT

    $(function() {
        $("ul.droptrue").sortable({
            connectWith: 'ul',
            opacity: 0.6,
            update : updatePostOrder
        });

        $("#sortable1, #sortable2").disableSelection();
        $("#sortable1, #sortable2").css('minHeight',$("#sortable1").height()+"px");
        updatePostOrder();
    });

    function updatePostOrder() { 
        var arr = [];
      $("#sortable2 li").each(function(){
        arr.push($(this).attr('id'));
      });
      $('#postOrder').val(arr.join(','));
  }
youre gonna wanna look au niveau des Poignées.. c'est le code, vous devriez être en se concentrant sur l'exemple: start: function(e, ui) { ui.helper.addClass(selectedClass); }, de recherche pour Helper/poignée de jquery sortable

OriginalL'auteur J K | 2014-04-15