Drag N Drop doublons

Version imprimable

24/07/2013, 13h33
noobyyy

Drag N Drop doublons

Bonjour, j'aimerai utiliser jQuery UI, en utilisant ce widget-ci :
http://jqueryui.com/droppable/#shopping-cart

Cependant comment éviter les doublons ?

Je n'arrive pas à dire :

si ui.draggable.text() existe dans la liste <li> alors ne la rajoute pas.

J'avais essayé avec un find mais sans succès.

Comment feriez-vous ceci ? Merci
24/07/2013, 14h00
Bovino

:contains() ?
24/07/2013, 14h30
noobyyy

Merci beaucoup j'ai pu adapter mon code je pensais que find pouvais également chercher du contenu je me suis trompé.

en revanche dernière question pour supprimer un élément en cours j'utilise remove() ?

Bonjour,
finalement je vais ré-ouvrir ce sujet car je n'arrive pas à m'en sortir :cry: :

J'aimerai déplacer les noms des animaux dans une maison sans mettre de doublon.

Dans un second temps j'ai également essayé de supprimer un animal en double cliquant sur lui mais sans succès... :(

Voici mon code test ci-dessous :

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
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
 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Shopping Cart Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
h1 { padding: .2em; margin: 0; }
#products { float:left; width: 500px; margin-right: 2em; }
#cart { width: 200px; float: left; margin-top: 1em; }
/* style the list to maximize the droppable hitarea */
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
</style>
<script>
$(function() {
$( "#catalog" ).accordion();
$( "#catalog li" ).draggable({
appendTo: "body",
helper: "clone"
});
$( ".maisons ol" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
 
var avant = $( this );	
 
$( this ).find( ".placeholder" ).remove();
 
$('#cible').find("div[id^='maison_']").each(function(){
 
	nb = $("#"+this.id+" li:contains("+ui.draggable.text()+")").size();
 
	if(nb < 1) {		
		$( '<li></li>').text( ui.draggable.text() ).appendTo( avant );	
	}
 
 
});
 
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$( this ).removeClass( "ui-state-default" );
}
});
 
});
 
jQuery(document).ready(function($) {
 
$('#cible .maisons').dblclick(function() {
 
	console.log( $( this ) );
 
	$( this ).remove();
});
 
});
 
</script>
</head>
<body>
<div id="products">
	<h1 class="ui-widget-header">Sources : Tables</h1>
	<div id="catalog">
		<h2><a href="#">Animaux</a></h2>
			<div>
				<ul>
					<li>Chien</li>
					<li>Chat</li>
					<li>Cheval</li>
				</ul>
			</div>
	</div>
</div>
<div id="cible">
	<h2>Cible</h2>
	<div class="maisons" id="maison_un">
		<h1 class="ui-widget-header">maison_un</h1>
		<div class="ui-widget-content">
			<ol>
				<li class="placeholder">Add your items here</li>
			</ol>
		</div>
	</div>
	<div class="maisons" id="maison_deux">
		<h1 class="ui-widget-header">maison_deux</h1>
		<div class="ui-widget-content">
			<ol>
				<li class="placeholder">Add your items here</li>
			</ol>
		</div>
	</div>	
 
</div>
 
</body>
</html>

Merci de votre aide. :ccool:

EDIT :

J'ai pu résoudre mon problème de doublon en utilisant parent() et size() cependant je n'arrive pas à supprimer un élément li sur son double click :calim2:

en faite quand je rajoute des <li> dans le document ils n'apparaissent pas dans le document :
Code:

1 2 3 4 5 jQuery(document).ready(function($) { // instructions les nouveaux <li> ne sont pas reconnus $("li").dblclick( function () { alert( $( this ) ); }); });
Comment actualiser le document ?

Bonsoir

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
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
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			//"http://code.jquery.com/jquery-1.10.2.min.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js",
			function(){
 
				$( function(){
 
$( "#catalog" ).accordion();
 
$( "#catalog li" ).draggable({
	"appendTo" : "body",
	"helper" : "clone"
});
 
$( ".maisons ol" )
	.droppable({
		"activeClass" : "ui-state-default",
		"hoverClass" : "ui-state-hover",
		"accept" : ":not(.ui-sortable-helper)",
		"drop" : function( event, ui ){
			var str = ui.draggable.text();
 
			$( this ).find( ".placeholder" ).remove();
 
			if ( $( "li:contains(" + str + ")", this ).size() < 1 ){
				$( this ).append( "<li>" + str + "</li>" );
			}
		}
	})
	.sortable({
		"items" : "li:not(.placeholder)",
		"sort" : function(){
			$( this ).removeClass( "ui-state-default" );
		}
	});
 
$( ".maisons ol" ).on( "dblclick", "li", function(){
	if ( $( this ).parent().children().size() < 2 ){
		$( this ).parent().append( '<li class="placeholder">Add your items here</li>' );
	}
 
	$( this ).remove();
});
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
		h1 { padding: 0.2rem; margin: 0; }
		#products { width: 50rem; margin-right: 2rem; }
		#cart { width: 20rem; margin-top: 1rem; }
		#cart ol { margin: 0; padding: 1rem 0 1rem 3rem; }
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<div id="products">
	<h1 class="ui-widget-header">Sources : Tables</h1>
	<div id="catalog">
		<h2>
			<a href="#">Animaux</a>
		</h2>
		<div>
			<ul>
				<li>Chien</li>
				<li>Chat</li>
				<li>Cheval</li>
			</ul>
		</div>
	</div>
</div>
 
<div id="cible">
	<h2>Cible</h2>
	<div id="maison_un" class="maisons">
		<h1 class="ui-widget-header">maison_un</h1>
		<div class="ui-widget-content">
			<ol>
				<li class="placeholder">Add your items here</li>
			</ol>
		</div>
	</div>
	<div id="maison_deux" class="maisons">
		<h1 class="ui-widget-header">maison_deux</h1>
		<div class="ui-widget-content">
			<ol>
				<li class="placeholder">Add your items here</li>
			</ol>
		</div>
	</div>
</div>
 
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-07-15T01:23:25.952+02:00" pubdate>2013-07-15T01:23:25.952+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

30/07/2013, 09h48
noobyyy

Merci beaucoup :ccool: