11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] Drag and drop dans un input

je cherche à faire un drag and drop de prénoms d'une liste dans un input (afin de créer un planning ou emploi du temps. Mais je n'arrive pas à insérer les prénoms dans l'input. Pouvez vous m'aider ? voici le script. Merci


<link rel="stylesheet" href="jquery.ui.all.css">
<script src="jquery-1.6.2.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.draggable.js"></script>
<script src="jquery.ui.droppable.js"></script>
<script src="jquery.ui.sortable.js"></script>


<style>
h1 { padding: .2em; margin: 0; }
#liste { float:left; width: 500px; margin-right: 2em; }
#cart { width: 200px; float: left; }
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
li {margin:0; padding:0; list-style-image:none; list-style-position:outside; list-style-type:none; }

</style>
<script>
$(function() {

$("#catalog li").draggable({
appendTo: "body",
helper: "clone"
});
$("#cart div").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this).find(".planning").text(ui.draggable.text())
.appendTo(this);
}
});

});

</script>

<div class="demo">

<div id="liste">
<h1 class="ui-widget-header">personnes</h1>
<div id="catalog">
<ul>
<li>Eric</li>
<li>Claire</li>
<li>Olivier</li>
</ul>
</div>
</div>

<div id="cart">
<h1 class="ui-widget-header">cellule</h1>
<div class="ui-widget-content">
<div><li class="planning"><input type="texte" maxlength="18" /></li></div>
</div>
</div>

</div>
Modifié par daggoon (09 Oct 2011 - 19:51)
Bonjour,

Déjà 3 erreurs dans une même ligne de code (sans doute des distractions) :
daggoon a écrit :
<div><li class="planning"><input type="texte" maxlength="18" /></li></div>

1- Pas de ul ??
2- type="texte" ??
3- pas d'attribut size pour l'input ??

D'autre part, je ne suis pas certain qu'il faille passer par jQuery pour obtenir le résultat que tu attends. Cela fonctionne directement dans la page web, non? Du moins avec IE et FF.
Et bien tu écris des "li" sans "ul".
li est l'élément d'une liste (ul ou ol).

Je crois que ça marche non ? Enfin j'ai regardé rapidement sur ton lien, mais le drag'n'drop pour des noms n'est pas en terme ergonomique l'idéal.

Tu devrais utiliser un auto-complete, ou une liste select à choix multiples.
Merci. Je vais tenter l'auto-complete. Effectivement, ça parait plus simple sur le plan ergonomique.
Mais j'aimerais trouver tout de même la solution à mon problème. Les prénoms ne vont toujours pas dans l'input.
Je ne sais pas trop si j'ai bien compris ce que tu veux faire, mais il y a un moyen bien plus léger que de faire appel à jQuery. De plus, il suffit de cliquer sur le prénom! Que penses-tu de ceci?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Entrer prénoms dans input type text</title>
<script type="text/javascript">
var ipbval = "";
function ajouter(ajout){
	ipbval = document.getElementById('inputBox').value;
	ipbval += ajout+"; ";
	document.getElementById('inputBox').value = ipbval;
}
</script>
<style type="text/css">
#catalog ul li {cursor:pointer}
</style>
</head>
<body>
<div id="liste">
	<h1 class="ui-widget-header">personnes</h1>	
	<div id="catalog">
		<ul>
			<li onclick="ajouter(this.innerHTML);">Eric</li>
			<li onclick="ajouter(this.innerHTML);">Claire</li>
			<li onclick="ajouter(this.innerHTML);">Olivier</li>
		</ul>
	</div>
</div>
<div id="cart">
	<h1 class="ui-widget-header">cellule</h1>
		<div class="ui-widget-content">
		<div><ul><li class="planning"><input type="text" id="inputBox" value="" size="120" /></li></ul></div>
	</div>
</div>
</body></html>

A toi d'adapter bien sûr ...
Modifié par lddsoft (08 Oct 2011 - 18:12)
Merci pour ton aide. C'est une bonne idée. Il faudra que je l'adapte car les prénoms doivent entrer dans un tableau (emploi du temps) avec plusieurs cellules input. Et je dois mettre un seul prénom par cellule.
Donc, en gros, et sans drag-'n-drop, quelque chose comme ceci :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Entrer prénoms dans input type text</title>
<script type="text/javascript">
var prenom = "";

function placer(id){
	document.getElementById(id).value = prenom;
	prenom = "";
}
</script>
<style type="text/css">
#liste {float:left;background:#9F9FD0;padding:15px}
#cart {margin-left:400px}
#catalog ul li {cursor:pointer}
#catalog ul li:hover {background:#fff;}
li.planning input {cursor:pointer}
</style>
</head>
<body>
<div id="liste">
	<h1 class="ui-widget-header">Personnes</h1>	
	<div id="catalog">
		<ul>
			<li onclick="prenom=this.innerHTML;">Eric</li>
			<li onclick="prenom=this.innerHTML;">Claire</li>
			<li onclick="prenom=this.innerHTML;">Olivier</li>
		</ul>
	</div>
</div>

<div id="cart">
	<h1 class="ui-widget-header">Cellules</h1>
	<div class="ui-widget-content">
		<div><small>Cliquez dans le champ pour effacer son contenu:</small>
			<ul>
				<li class="planning">Tâche 1 : 
					<input type="text" id="inputBox0" value="" size="12" onclick="placer(this.id);return false;" />
				</li>
				<li class="planning">Tâche 2 :
					<input type="text" id="inputBox1" value="" size="12" onclick="placer(this.id);return false;" />
				</li>
				<li class="planning">Tâche 3 :
					<input type="text" id="inputBox2" value="" size="12" onclick="placer(this.id);return false;" />
				</li>
			</ul>
		</div>
	</div>
</div>
</body></html>
A arranger à ta sauce évidemment ...
Plus simple et beaucoup plus léger surtout.
Si tu es satisfait, n'oublie pas de marquer le titre de ton post d'un petit [Résolu]
A++
Modifié par lddsoft (09 Oct 2011 - 15:35)
Sujet clos
Aller à