UI, conflit Sortable / Resizable / Draggable

**Mindark** · 11/12/2009, 12h15

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

**danielhagnoul** · 13/12/2009, 01h44

Bonsoir.

Je viens de tester et je m'aperçois que dès le départ, les deux éléments redimensionnables peuvent déjà se recouvrir. Il suffit d'agrandir l'élément deux vers la gauche et il recouvre l'élément un.

[EDIT 2 h 30]

J'ai trouvé ! L'élément reste « draggable » et il se voit attribuer un « display list-item » !

Voici une version qui semble fonctionner :

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
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
	<style type="text/css">
		body {
			background-color:#FFFFFF;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			border:1px solid #999999;
		}
 
		/* TEST */
		.drag li {
			width : 40px;
			height : 40px;
			margin : 4px;
			background :#BDBEBD;
			cursor:pointer;
		}
		#sort {
			width:900px;
			height:110px;
			border:1px solid #cccccc;
			background:#444444;
		}
		.libloc {
			float:left;
			width : 50px;
			height : 100px;
			margin : 4px;
			background :#BDBEBD;
			cursor:pointer;
		}
	</style>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("ul.drag li").draggable({
				helper:"clone",
				connectToSortable:"ul#sort"
			});
 
			$("#sort").sortable();
 
			$("#sort li").resizable({
				minHeight:100,
				maxHeight:100,
				minWidth:50,
				maxWidth:200
			});
 
			$("#sort").bind('sortreceive', function(event, ui){
				$("li", this).resizable({
					minHeight:100,
					maxHeight:100,
					minWidth:50,
					maxWidth:200
				});
 
				$(this).sortable("refresh");
 
				$("li", this).each(function(i,item){
					$(item).removeClass("ui-draggable").addClass("libloc").css("display","block");
				});
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<p>Drag an element...</p>
		<ul class="drag">
			<li>li3</li>
			<li>li4</li>
			<li>li5</li>
			<li>li6</li>
		</ul>
 
 
		<p>...and drop here...</p>
		<ul id="sort">
			<li class='libloc'>li1</li>
			<li class="libloc">li2</li>
		</ul>
 
		<div id="affiche"></div>
	</div>
</body>
</html>

**Mindark** · 13/12/2009, 23h14

Effectivement, cela marche bien mieux comme ca

Nickel, merci beaucoup

UI, conflit Sortable / Resizable / Draggable

jQuery

Vue hybride

Discussions similaires

Partager

Partager