STIC:Atelier graphisme, animation, interactivité et HTML5/Démo drag and dropt avec JQuery UI

De EduTech Wiki
Aller à : navigation, rechercher
<!doctype html>
<html>
<head>
<!--  Original code by Mattia A. Fritz
   http://tecfaetu.unige.ch/perso/maltt/fritz0/guides/jquery-ui/ex6_drag_and_drop_no_code.html
-->

<meta charset="utf-8">
<title>jQuery Ui Exemple  : application drag and drop sans code supplémentaire</title>
<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
<style>
.item {
	float: left;
	width: 100px;
	border: 1px solid #999;
	background-color: #F9F6D0;
	padding: 10px 15px;
	font-size: 12px;
	margin-right: 10px;
	margin-bottom: 10px;
}

.clear {
	clear: both;
	overflow: hidden;
}

.container {
	float: left;
	width: 120px;
	height: 200px;
	border: 1px solid #999;
	background-color: #DEF8FC;
	padding: 10px 15px;
	margin-right: 10px;
}
</style>
</head>

<body>

<h1>jQuery UI - application drag and drop sans code supplémentaire</h1>
<p>Ce petit jeu concernant la géographie est développé exclusivement à l'aide des méthodes, options et événements disponibles &quot;out of the box&quot; avec jQuery UI, c'est-à-dire qu'il n'a pas fallu écrire du code JavaScript spécifique. </p>
<p><strong>Trainer les pays dans le continent correspondant.</strong></p>
<div><div class="item amerique">Bolivie</div>
<div class="item afrique">Côte d'Ivoire</div>
<div class="item europe">Grèce</div>
<div class="item asie">Thailande</div>
<div class="item amerique">Canada</div>
<div class="item asie">Inde</div>
<div class="item afrique">Tanzanie</div>
<div class="item europe">Moldavie</div>
<div class="item oceanie">Australie</div>
</div>
<div class="clear"></div>
<div class="container afrique-container"><p>Afrique</p></div>
<div class="container amerique-container"><p>Amérique</p></div>
<div class="container asie-container"><p>Asie</p></div>
<div class="container europe-container"><p>Europe</p></div>
<div class="container oceanie-container"><p>Oceanie</p></div>
<div class="clear"></div>

<p>Made by <a href="http://tecfaetu.unige.ch/perso/maltt/fritz0/">MAF</a> (23.08.2014)</p>

<script src="jquery.js"></script> 
<script src="jquery-ui.min.js"></script>
<script>
$(".item").draggable({
	revert: "invalid",
	cursor: "move"
});

$(".afrique-container").droppable({
	accept: ".afrique"
});
$(".amerique-container").droppable({
	accept: ".amerique"
});
$(".asie-container").droppable({
	accept: ".asie"
});
$(".europe-container").droppable({
	accept: ".europe"
});
$(".oceanie-container").droppable({
	accept: ".oceanie"
});
  </script>
</body>
</html>

Voir: