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
| <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Je débute en jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="test.css" />
<script type="text/javascript">
jQuery(document).ready(function($){
$(".type1").draggable();
$(".type2").draggable();
$(".type3").draggable();
$( ".type4" ).droppable({
accept: ".type1",
drop: function( event, ui ) {
ui.draggable.appendTo( $(this) )
.css({
left: '0px',
top: '0px'
})
.draggable({ containment: 'parent' });
}
});
$( ".type5" ).droppable({
accept: ".type2",
drop: function( event, ui ) {
ui.draggable.appendTo( $(this) )
.css({
left: '0px',
top: '0px'
})
.draggable({ containment: 'parent' });
}
});
$( ".type6" ).droppable({
accept: ".type3",
drop: function( event, ui ) {
ui.draggable.appendTo( $(this) )
.css({
left: '0px',
top: '0px'
})
.draggable({ containment: 'parent' });
}
});
});
</script>
</head>
<body>
<div id="blocGauche">
<table rules=all>
<tr>
<td><p id="A" class="type1">15</p></td>
<td><p id="B" class="type2">16</p></td>
<td><p id="C" class="type3">17</p></td>
</tr>
<tr>
<td rowspan="2"><p id="A" class="type1">24</p></td>
<td>
<p id="B1" class="type2">28</p>
</td>
<td rowspan="2"><p id="C" class="type3">530</p></td>
</tr>
<tr>
<td>
<p id="B2" class="type2">48</p>
</td>
</tr>
<tr>
<td><p id="A" class="type1">16</p></td>
<td><p id="B" class="type2">1024</p></td>
<td><p id="C" class="type3">31</p></td>
</tr>
</table>
</div>
<div id="blocDroit">
<table rules=all>
<tr>
<td><p id="A" class="type4">42</p></td>
<td><p id="B" class="type5">56</p></td>
<td><p id="C" class="type6">73</p></td>
</tr>
<tr>
<td rowspan="2"><p id="A" class="type4">1</p></td>
<td>
<p id="B1" class="type5">228</p>
</td>
<td rowspan="2"><p id="C" class="type6">12</p></td>
</tr>
<tr>
<td>
<p id="B2" class="type5">4</p>
</td>
</tr>
<tr>
<td><p id="A" class="type4">98</p></td>
<td><p id="B" class="type5">76</p></td>
<td><p id="C" class="type6">81</p></td>
</tr>
</table>
</div>
</body>
</html> |
Partager