UI draggable vers UI sortable(s) imbriqués
Bonjour ,
J'ai une liste d'éléments draggable (#drag > div) que je fais glisser dans deux div sortables #sort et #sort2 ,#sort2 est contenu dans #sort ,
quand je faisais glisser du contenu dans le <div id="#sort2"> imbriqué dans le <div id="#sort"> ,le contenu était cloné dans les 2 divs ,cela me semble logique vu que quand je relâche l'élément dans #sort2 je suis aussi sur #sort ,
pour régler ce problème j'ai écrit le bout de code test ci dessous ,
Dans le div sortable concerné à l'update: je relève dans un tableau tabItem[] les sélecteurs des éléments cloné puis dans le stop: du drag je remove() jusqu'à l'avant dernier tous les sélecteurs contenus dans tabItem[] ,
je modifie ensuite le dernier avec replaceWith (dans la réalité je modifie avec un contenu ajax)
ce n'est pas parfait mais ça a l'avantage de fonctionner ,
1 ) Je me demande si il n'y aurait pas moyen d'arriver au même résultat avec moins de bidouillage d'autant plus que le résultat n'est pas idéal non plus
2 ) sous ie les sortables imbriqués réagissent très mal quand on les drag et il me semble sans certitudes avoir vu il y'a quelques mois qu'il y'a moyen de modifier une ligne du code jquery pour stopper la propagation des événements ,j'ai beau chercher avec google je ne retrouve pas cet exemple que j'avais même testé avec succès ,à vrai dire j'en arrive à me demander si je ne l'aurais pas rêvé
Merci pour vos conseils ,pistes ,suggestions d'améliorations
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
|
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#drag,#sort,#sort2{min-height:15px;border:1px solid black;margin:10px}
.higlight {background-color: silver}
</style>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1.4.2");google.load("jqueryui","1.8.4");</script>
<script type="text/javascript">
/*-------------------------------------*/
$(document).ready(function(){
var cmp=0,numCont=0;
var tabItem=new Array();
$('#drag > div').draggable({helper:'clone',connectToSortable:'#sort,#sort2',
start:function(event,ui)
{
tabItem.length=0;
cmp=0;
},
stop:function(event,ui)
{
if(cmp)
{
var i=0;cmp--;
for(;i!=cmp;i++)tabItem[i].remove(); /* jusqu'à l'avant dérnier */
tabItem[i].replaceWith('<div>contenu '+(numCont++)+'</div>');
$('#sort2').sortable('refresh');
}
}
});
$('#sort,#sort2').sortable(
{
placeholder:'higlight',
forcePlaceholderSize:true,
update:function(event,ui)
{
tabItem[cmp++]=ui.item;
}
});
});
</script>
</head>
<body>
<h5>Draggable</h5>
<div id="drag">
<div>un</div>
<div>deux</div>
<div>trois</div>
<div>quatre</div>
</div>
<!-- -->
<h5>Sortable</h5>
<div id="sort">
<div id="sort2"></div>
</div>
</body>
</html> |
