[drag and drop] limitation des éléments

Version imprimable

09/09/2012, 21h37
pi-2r

[drag and drop] limitation des éléments

Bonsoir,
je cherche un moyen de limiter une balise "<ul></ul>" à ne contenir/ recevoir qu'un seul élément. J'ai recherche des pistes sur le net, mais je n'ai pas trouvé grand chose ....

Si vous avez des pistes, je suis preneur :)

Merci d'avance
09/09/2012, 22h54
NoSmoking

Bonsoir,
il suffit de lire le nombre de children de l'élément, objet.children.length, et de le rendre non recevant.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$( function(){
	var limax = 2; // exemple maximum 2 li par ul
 
	// cache tous les li des ul ayant la classe limite
	$( "ul.limite > li" ).hide();
 
	// montre uniquement les limax premiers
	$( "ul.limite > li" ).each( function( i, item ){
	   if ( i < limax ){ // i base 0
		  $( item ).show();
	   }
	});
});

bonsoir, merci de vos réponses :)
cependant j'aimerai faire fonctionner le fameux hidden avec ma partie de code, chose qui pour le moment je n'arrive pas à faire ...
voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
jQuery.noConflict();
(function($)
{
  $(function()
  {    
        $("#player-positions1").sortable(
        {
                /*placeholder: 'highlight',*/
                connectWith: "ul",
                update: function(event, ui)
                {
                        var result = $('#player-positions1').sortable('serialize');
                        $.get("inc/action_player.php", {'list': result});
                }
            });
        $("#player-positions1").disableSelection();
  });
 
})(jQuery);

si quelqu'un sait comment faire, je suis preneur :)
Merci d'avance

voici la solution:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function() {
    $("ul.droptrue").sortable({
        connectWith: "ul",
    });
 
    $("ul.dropfalse").sortable({
        connectWith: "ul",
        dropOnEmpty: false
    });
 
    $("#sortable1, #sortable2, #sortable3").disableSelection();
 
    $("#sortable3").on("sortreceive", function(event, ui) {
        var $list = $(this);
 
        if ($list.children().length > 1) {
            $(ui.sender).sortable('cancel');
        }
    });
});