web-dev-qa-db-fra.com

jQuery UI triable et sélectionnable

Est-ce que quelqu'un sait comment combiner jQuery UI sélectionnable et triable? Ce script: http://nicolas.rudas.info/jquery/selectables_sortables/ ne fonctionne pas dans Chrome et comporte également des modifications de plug-in .

jqueryjquery-uijquery-ui-sortablejquery-ui-selectable
28
minnur

Je viens de trouver this solution très simple de rdworth :

CSS:

ul { width: 300px; list-style: none; margin: 0; padding: 0; }
li { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; }
li .handle { background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; }
.ui-selecting { background: #eee; }
.ui-selecting .handle { background: #ddd; }
.ui-selected { background: #def; }
.ui-selected .handle { background: #cde; }

HTML:

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

Javascript:

$( "#list" )
    .sortable({ handle: ".handle" })
    .selectable({ filter: "li", cancel: ".handle" })
    .find( "li" )
        .addClass( "ui-corner-all" )
        .prepend( "<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>" );

Voir: this fiddle.

32
mhu

http://jsfiddle.net/t9YTB/

C’est tout ce que je peux vous donner :) mais l’idée est là. ce n'est pas tout à fait complet, mais j'espère que vous pourrez jouer avec les valeurs et voir comment ça se passe à partir de là :)

5
Val

Une partie de mon arsenal de base de jQuery inclut les éléments suivants, car il s’agit de généralement agaçant lorsque vous allez faire glisser quelque chose et que vous finissez par sélectionner le texte à la place ...

// disables text selection on sortable, draggable items 
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();

Vous ne savez pas si vous pouvez simplement basculer le "désactiver" sur le "activer", mais il y a mon $ .02. Sans le vouloir, le bon sens suggère que vous deviez peut-être définir une section inactive dans le même élément "group", pour fournir un "descripteur" pour l'action de glisser ... ou ces clics risquent d'être indûment confondus. intention de sélectionner/éditer ... 

0
Alex Gray

Essaye ça. Vous pouvez utiliser Ctrl + Click pour la sélection multiple et le tri 

http://jsfiddle.net/r83vrm0q/

0
kadir950

Si vous voulez sélectionner plusieurs éléments et les déplacer dans une autre liste, ceci violon fonctionne bien:

HTML:

    <meta charset="utf-8" />
<title>jQuery UI Sortable with Selectable</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/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.3/jquery-ui.js"></script>
<body>

<ul id="album" class="connectedSortable">
    <li id="li1"><div>1- First</div></li>
    <li id="li2"><div>2- Second</div></li>
    <li id="li3"><div>3- Third</div></li>
    <li id="li4"><div>4- Fourth</div></li>
    <li id="li5"><div>5- Fifth</div></li>
    <li id="li6"><div>6- Sixth</div></li>
    <li id="li7"><div>7- Seventh</div></li>
    <li id="li8"><div>8- Eighth</div></li>
</ul>

<ul id="album2" class="connectedSortable">
    <li id="li1"><div>1- 1</div></li>
    <li id="li2"><div>2- 2</div></li>
    <li id="li3"><div>3- 3</div></li>
    <li id="li4"><div>4- 4</div></li>
    <li id="li5"><div>5- 5</div></li>
    <li id="li6"><div>6- 6</div></li>
    <li id="li7"><div>7- 7</div></li>
    <li id="li8"><div>8- 8</div></li>
</ul>
<div id="anotheralbum" class="connectedSortable">
another album - no style for the lists inside here
</div>

<br style="clear:both">

</body>

Javascript:

<script>
$(function() {
//

$('body').selectable({
    filter: 'li'
    //filter: '#album2 > li'
});

/*
Since the sortable seems unable to move more than one object at a 
time, we'll do this:

The LIs should act only as wrappers for DIVs.

When sorting a LI, move all the DIVs that are children of selected 
LIs to inside the sorting LI (this will make them move together);
but before doing that, save inside the DIVs a reference to their
respective original parents, so we can restore them later.

When the user drop the sorting, restore the DIVs to their original
parent LIs and place those LIs right after the just-dropped LI.

Voilá!

Tip: doesn't work so great if you try to stick the LIs inside the LI
*/

$('.connectedSortable').sortable({
    connectWith: ".connectedSortable",
    delay: 100,
    start: function(e, ui) {
        var topleft = 0;

        // if the current sorting LI is not selected, select
        $(ui.item).addClass('ui-selected');

        $('.ui-selected div').each(function() {

            // save reference to original parent
            var originalParent = $(this).parent()[0];
            $(this).data('Origin', originalParent);

            // position each DIV in cascade
            $(this).css('position', 'absolute');
            $(this).css('top', topleft);
            $(this).css('left', topleft);
            topleft += 20;

        }).appendTo(ui.item); // glue them all inside current sorting LI

    },
    stop: function(e, ui) {
        $(ui.item).children().each(function() {

            // restore all the DIVs in the sorting LI to their original parents
            var originalParent = $(this).data('Origin');
            $(this).appendTo(originalParent);

            // remove the cascade positioning
            $(this).css('position', '');
            $(this).css('top', '');
            $(this).css('left', '');
        });

        // put the selected LIs after the just-dropped sorting LI
        $('#album .ui-selected').insertAfter(ui.item);

        // put the selected LIs after the just-dropped sorting LI
        $('#album2 .ui-selected').insertAfter(ui.item);
    }
});




//
});
</script>

CSS:

<style>
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#album {
    list-style: none;
    float: left;
    width: 20%;
    border: 1px solid red;
}
#album2 {
    list-style: none;
    float: left;
    width: 20%;
    border: 1px solid red;
}
#album li  {
    float: left;
    margin: 5px;
}

#album2 li  {
    float: left;
    margin: 5px;
}


#album div {
    width: 100px;
    height: 100px;
    border: 1px solid #CCC;

    background: #F6F6F6;    
}
#album2 div {
    width: 100px;
    height: 100px;
    border: 1px solid #CCC;

    background: #F6F6F6;    
}
#album .ui-sortable-placeholder {
    border: 1px dashed #CCC;
    width: 100px;
    height: 100px;
    background: none;
    visibility: visible !important;
}
#album2 .ui-sortable-placeholder {
    border: 1px dashed #CCC;
    width: 100px;
    height: 100px;
    background: none;
    visibility: visible !important;
}

#album .ui-selecting div, 
#album .ui-selected div {
    background-color: #3C6;
}

#album2 .ui-selecting div, 
#album2 .ui-selected div {
    background-color: #3C6;
}

#anotheralbum {
    list-style: none;
    float: left;
    width: 20%;
    height: 800px;
    border: 1px solid blue;
}
</style>

Ceci a été modifié à partir de l'exemple de http://www.pieromori.com.br/snippets/sortable_with_selectable.html grâce à Piero Mori.

0
MooseEagleShark