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

**ikeabp** · 14/01/2013, 22h06

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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({
 
  });
 
 });

**SpaceFrog** · 15/01/2013, 10h49

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

**ikeabp** · 15/01/2013, 13h34

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.

**ikeabp** · 15/01/2013, 16h02

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 ?

**danielhagnoul** · 17/01/2013, 00h02

Bonsoir

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**ikeabp** · 17/01/2013, 13h24

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

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

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager