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