Bonjour, j'ai un problème avec l'utilisation combiné de Sortable et Resizable.
Mon code vaut mieux qu'un long discours :

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
 
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.droppable.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
  <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/bgiframe/jquery.bgiframe.min.js" type="text/javascript"></script>
  <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
 
<title>From draggable to sortable...</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
 #sort li
 {
   float:left;
   list-style-type:none;
   width : 50px;
   height : 100px;
   margin : 4px;
   background :#BDBEBD;
 }
</style>
 
  <script type="text/javascript">
  $(document).ready(function(){
 
 
	$('.drag > li').draggable({helper:'clone',connectToSortable:'#sort'});
	$('#sort').sortable();
 
    $("#sort > li").resizable();
	$("#sort > li").resizable('option', 'minHeight', 100);
	$("#sort > li").resizable('option', 'maxHeight', 100);
	$("#sort > li").resizable('option', 'grid', [50, 50]);
	$("#sort > li").resizable('option', 'handles', 'all');
 
	$('#sort').bind('sortreceive', function(event, ui) {
    	$("#sort > li").resizable();
		$("#sort > li").resizable('option', 'minHeight', 100);
		$("#sort > li").resizable('option', 'maxHeight', 100);
		$("#sort > li").resizable('option', 'grid', [50, 50]);
		$("#sort > li").resizable('option', 'handles', 'all');
 
		$('#sort').sortable();
		$('#sort').sortable('refresh');
    });
 
  });
  </script>
</head>
<body>
 
Drag an element...
<ul class="drag">
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
</ul>
 
 
...and drop here...
<ul id="sort" style="width:900px;height:110px;border:1px solid #ccc;background:#444;">
  <li class='libloc'>li1</li>
  <li class="libloc">li2</li>
</ul>
 
</body>
</html>
Comme vous pouvez le tester, cela marche presque parfaitement. Le problème, si je drag un element dans mon div, et qu'ensuite, j'essaie de le redimensionner, alors c'est devient la cata, et mes elements se superposent...

Merci à ceux qui auraient une idée