UI draggable vers UI sortable(s) imbriqués

**Edgar** · 16/09/2010, 16h38

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 :

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
 
<!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>

**Edgar** · 17/09/2010, 21h27

j'ai trouvé ,

c'est tout simple et c'est pas la même solution que j'avais essayé mais le principe est le même,
,le pire c'est que je suis passé plein de fois devant la solution ces jours ci

Code :

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

1
2
3
4
5
6
7
8
 
$('#sort,#sort2').sortable(
    {
    placeholder:'higlight',
    forcePlaceholderSize:true
    }).bind('mousedown', function(e) {
  e.stopPropagation();
});

**jqoueri** · 24/11/2010, 23h00

Envoyé par Edgar

j'ai trouvé ,

c'est tout simple et c'est pas la même solution que j'avais essayé mais le principe est le même,
,le pire c'est que je suis passé plein de fois devant la solution ces jours ci

Code :

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

1
2
3
4
5
6
7
8
 
$('#sort,#sort2').sortable(
    {
    placeholder:'higlight',
    forcePlaceholderSize:true
    }).bind('mousedown', function(e) {
  e.stopPropagation();
});

Salut! Je fait en ce moment la même chose que ton exemple et j'ai également le même problème

seulement la solution que tu as ( qui me semble aussi être la bonne ) ne fonctionne pas quand je la remplace dans ton fichier d'exemple, il y aurait t'il une petite astuce de plus ?

Merci d'avance

**Edgar** · 26/11/2010, 22h48

Salut ,

J'ai comme un doute sur l'efficacité de la solution que j'avais indiqué sur ce post

,

je code pas du tout ces jours ci et je suis pas au top avec le jQuery ,
quoi qu'il en soit parce que je ne me souvenais plus exactement comment j'avais fait j'ai regardé le code que je développe et que j'ai temporairement mis de côté ,
en fin de compte j'avais fini par reprendre la solution de mon premier message sur ce post ,à savoir relever dans un tableau tabItem[] les sélecteurs des éléments cloné etc ... ,dans mon cas ça rempli mes objectifs que j'avais d'ailleurs revu à la baisse

j'avais pas mal cherché sur le net et il me semble que je n'avais vu que des solutions à base de scripts pour ce problème.

Quelqu'un pourra peut être mieux te renseigner que moi

Si je trouve une solution efficace ou si quelque chose d'utile à ce sujet me revient à l'esprit je ferais remonter ce message

UI draggable vers UI sortable(s) imbriqués

jQuery

Vue hybride

Discussions similaires

Partager

Partager