STIC:Atelier graphisme, animation, interactivité et HTML5/Démo drag and dropt avec JQuery UI
Aller à la navigation
Aller à la recherche
<!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 "out of the box" 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: