Limiter le déplacement d'éléments sortable

Version imprimable

Bonjour,

Je cherche à empecher mes éléments CTRL LIBRE(1,2) et CTRL (1,2,3) une fois déplacés vers step (1,2) d'être redéplacés ailleurs que leur liste d'origine, c'est a dire CTRL LIBRE(1,2) dans ctrlLibre et CTRL (1,2,3) dans ctrl, en revanche je dois pouvoir les déplacer librement entre step 1 et 2 et les step doivent aussi se déplacer entre eux une idée ?

Merci. :(

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<table>
  <tr>
    <td>
      <ul id="ctrlLibre" class="ctrlLibre">
      <li id="liCtrlLibre" class="liCtrlLibre">CTRL LIBRE 1</li>
      <li id="liCtrlLibre" class="liCtrlLibre">CTRL LIBRE 2</li>
  </ul> 
    </td>
    <td>
    <ul id="ctrl" class="ctrl">
  <li id="liCtrl" class="liCtrl">CTRL 1</li>
  <li id="liCtrl" class="liCtrl">CTRL 2</li>
  <li id="liCtrl" class="liCtrl">CTRL 3</li>
</ul>
    </td>
    <td><div id="content" class="content">
<ul id="step1" class="step">a
</ul>
<ul id="step2" class="step">b
</ul> 
</div>
    </td>     
  </tr>
</table>

CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.ctrlLibre li
{
  list-style-type: none;
  background-color: Green;
  width: 100px;
}
 
.ctrl li
{
  list-style-type: none;
  background-color: Red;
  width: 60px;
}
 
.step
{
  list-style-type: none;
  width: 100px;
  height: 100px;
  border: 1px solid Black;
 
}
 
#content, #ctrlLibre, #ctrl
{  
  width: 150px;
  height: 250px;
  border: 1px solid Black;  
}

JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function() {
 
  $("#ctrlLibre").sortable({
    connectWith: ".step",
    items:' li:not(.liCtrl)'
  });
 
  $("#ctrl").sortable({
    connectWith: ".step",
    items:' li:not(.liCtrlLibre)'
  });
 
  $(".step").sortable({  
    connectWith: "ul"
  });
 
   $("#content").sortable({
 
  });
 
 });

15/01/2013, 10h49
SpaceFrog

avec un système de limitations déplacement complexe tu peu passer par le data de l'objet déplacé et y stocker des informations sur son origine et ses limitations.
Ainsi sur le dragStart tu vérifies le data de l'objet et tu autorise ou non son déplacement
15/01/2013, 13h34
ikeabp

Bonjour et merci,

Effectivement je n'ai pas pensé aux événements et start en particulier, mes essais tournaient autour de l'option items en excluant le li si pas avec une classe particulière.

Je vais regarder cette piste.
15/01/2013, 16h02
ikeabp

Un petit coup de pouce : Comment autoriser ou pas son déplacement vers une cible ? ou comment autoriser ou pas la reception dans la cible ?

Bonsoir

Je suis arrivé à quelque chose de similaire à votre demande. Pour tester, il suffit de copier-coller le code ci-dessous :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="fr" manifest="http://danielhagnoul.developpez.com/pageTest.mf">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/overcast/jquery-ui.css">
	<style>
                /* TEST */
                .content, .ctrlLibre, .ctrl {  
                  width: 150px;
                  height: 250px;
                  border: 1px solid black;  
                }
                .ctrlLibre li {
                  list-style-type: none;
                  background-color: green;
                  width: 100px;
                }
                .ctrl li {
                  list-style-type: none;
                  background-color: red;
                  width: 100px;
                }
                .content li {
                  list-style-type: none;
                  background-color: orange;
                  width: 100px;
                }
        </style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>Titre 2</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<table>
			<tbody>
				<tr>
					<td>
						<ul class="ctrlLibre connectedSortable" data-type="1">
							<li data-type="1">CTRL LIBRE 1</li>
							<li data-type="1">CTRL LIBRE 2</li>
			  			</ul> 
			    	</td>
			    	<td>
			    		<ul class="ctrl connectedSortable" data-type="2">
			  				<li data-type="2">CTRL 1</li>
			  				<li data-type="2">CTRL 2</li>
			  				<li data-type="2">CTRL 3</li>
						</ul>
			    	</td>
			    	<td>
						<ul class="content connectedSortable"  data-type="3">
							<li data-type="3">a</li>
							<li data-type="3">b</li>
						</ul>
		 	    	</td>     
			  	</tr>
		  </tbody>
		</table>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-01-16T23:53:35.906+01:00" pubdate>2013-01-16T23:53:35.906+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/i18n/jquery-ui-i18n.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>        
                "use strict";
 
                $(function(){
                        
                        $( ".ctrlLibre, .ctrl, .content" ).sortable({
                                connectWith: ".connectedSortable",
                                receive : function( event, ui ){
                                        var cibleType = $( event.target ).data( "type" ),
                                                elemType = $( ui.item ).data( "type" );
                                        
                                        if ( cibleType != 3 && cibleType != elemType ){
                                                // debug
                                                //console.log( "erreur", cibleType, elemType );
                                                
                                                $( ui.sender ).sortable( "cancel" );
                                        }
                                }
                        }).disableSelection();
                        
                });
                
                $(window).load(function(){
                        
                });
        </script>
</body>  
</html>

17/01/2013, 13h24
ikeabp

Bonjour et merci danielhagnoul, cela me parait à première vue pas mal, je vais regarder ça. :ccool:

Je crois que j'y suis, un commentaire peut être pour optimiser, test : http://jsfiddle.net/jGz8S/ ?