Concordance entre un élément drag et son drop sélectif

Version imprimable

Bonjour.
Je voudrai faire apparaitre un alert("succes") quand un element est placer sur un autre element drop qui lui correspond

Voici mon code, malgrer tout mes efforts aucune alert apparait.
Merci pour votre aide, je suis débutant en jquery

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
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script>
$(document).ready(function(){$('.visible').draggable()})
$("div:visible").css("background", "#9cf");
$('div.ca').droppable({onDrop:function(e,source){
	var name = $(source).find('p:eq(0)').text();alert(name);
	var cor = $("div.visible").attr("div").text();alert(cor);
	if (name=cor) {alert("reusite");} else {alert("echec");}}})
</script>
 
 
</head>
<body>
<div class="ca"><p>a</p></div>
<div class="visible"><p>a<p/></div>
<div class="visible"><p>b<p/></div>
</body>
</html>

30/03/2013, 17h46
NoSmoking

Bonjour,
pas tout regardé mais vu ceci

Code:

if (name=cor) {alert("reusite");} else {alert("echec");}}})

et plus particulièrement if (name=cor), je te laisse déjà conclure sur cette affectation.

Merci j'ai trouver.
Voici le code qui fonctionne:

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
$(function(){
 
	$('.item').draggable({
		revert:true,
		proxy:'clone',
		onStartDrag:function(){
			$(this).draggable('options').cursor = 'not-allowed';
			$(this).draggable('proxy').css('z-index',10);
		},
		onStopDrag:function(){
			$(this).draggable('options').cursor='move';
		}
	});
	$('.drop').droppable({
		onDragEnter:function(e,source){
			$(source).draggable('options').cursor='auto';
		},
		onDragLeave:function(e,source){
			$(source).draggable('options').cursor='not-allowed';
		},
		onDrop:function(e,source){
			var name = $(source).find('p:eq(0)').text();
			var cor = $(e.target).text();
			alert(name+"/"+cor);		}
	});
});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
 
<a href="#" class="item">
<div><p>1</p></div>
</a>
<br><br>
<a href="#" class="drop" >
<div class="valeur" id="1" ><>1</p></div>
</a>
<br><br>
<a href="#" class="drop">
<div class="valeur" id="2" ><p>2</p></div>
</a>

Rebonjour.
Quand je teste l'egalité des attribut, ca ne marche pas, j'ai toujour "echec"
Code:

1 2 3 var name = $(source).find('p:eq(0)').text(); var cor = $(e.target).text(); if (name==cor) {alert(name+"/"+cor);} else {alert("echec");};}

31/03/2013, 19h25
Philcmoi

Peut on comparer deux objets jquery text() ???
01/04/2013, 11h46
danielhagnoul

Peut-on comparer deux "string" en JavaScript ? C'est osé, même pour un premier avril ! :mouarf:
01/04/2013, 21h21
Philcmoi
danielhagnoul as tu vu mon code avant de se moquer du monde.
Code:

1 2 3 4 var name = $(source).find('p:eq(0)').text(); var cor = $(e.target).text(); if (name==cor) {alert(name+"/"+cor);} else {alert("echec");};}
name est de type String tandis que cor a pour type objet.
name et cor on la meme valeur text exemple 1 et 1 mais name=cor est faux.
La valeur retournée pour cor est un objet.

Si tu es si fort que ca transforme cor en string
01/04/2013, 22h36
Bovino
Désolé, mais Daniel a bien raison dans sa réflexion !
Code:

1 2 var name = $(source).find('p:eq(0)').text(); var cor = $(e.target).text();
Citation:

name est de type String tandis que cor a pour type objet.

Explique nous donc comment la méthode text() peut renvoyer soit une chaine soit un objet...
01/04/2013, 22h36
danielhagnoul
Citation:
Envoyé par Philcmoi

Rebonjour.
Quand je teste l'egalité des attribut, ca ne marche pas, j'ai toujour "echec"

Code:

1 2 3 var name = $(source).find('p:eq(0)').text(); var cor = $(e.target).text(); if (name==cor) {alert(name+"/"+cor);} else {alert("echec");};}
En l'occurrence je me demande qui se moque de qui.

Je vois une comparaison entre deux paramètres contenant le retour de la méthode text(), et cette méthode retourne un "string".

http://api.jquery.com/text/ :

Citation:

The result of the .text() method is a string containing the combined text of all matched elements.

Le sujet est clos en ce qui me concerne.
02/04/2013, 13h15
Philcmoi

Désolais danielhagnoul et merci pour tes precissions.
en effet tu as raison, et même en placant name.toString (valeur "1") et cor.toString (valeur "1")
le test d'égalité

Code:

name==cor

donne toujour un resultat echec, comme si les valeur de name.text() et cor.text() sont different

Voici le code html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
 
<a href="#" class="item">
<div><p>1</p></div>
</a>
<br><br>
<a href="#" class="drop" >
<div><p style="display:none;">1</p></div>
</a>
<br><br>
<a href="#" class="drop">
<div><p style="display:none;">2</p></div>
</a>
</body>

Le code jquery:

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
$(function(){
 
	$('.item').draggable({
		revert:true,
		proxy:'clone',
		onStartDrag:function(){
			$(this).draggable('options').cursor = 'not-allowed';
			$(this).draggable('proxy').css('z-index',10);
		},
		onStopDrag:function(){
			$(this).draggable('options').cursor='move';
		}
	});
	$('.drop').droppable({
		onDragEnter:function(e,source){
			$(source).draggable('options').cursor='auto';
		},
		onDragLeave:function(e,source){
			$(source).draggable('options').cursor='not-allowed';
		},
		onDrop:function(e,source){
			cor=$(e.target).find('p:eq(0)').text(); <==> ce qui a changer
			name=$(source).find('p:eq(0)').text();
			if (name==cor) {alert(" succes" +cor+"/"+name);}
			else {alert("fail cor val="+cor.length+"name="+name.length);}; 
		}
});})

La ca marche, auparavant a mon avis de débuttant cor sans le find devait parcourir le dom.
Apres verification de la taille de l'ancien cor=$(e.target).text() elle était de 3.alors que name est de un.
Enfin c'est mon hymble avis.

Code:

1
2
 
Le language utilisé est jquery

on peut faire plus simple
Avant

Code:

1
2
3
 
cor=$(e.target).find('p:eq(0)').text();
name=$(source).find('p:eq(0)').text();

Apres

Code:

1
2
3
 
cor=$(e.target).text();
name=$(source).text();