Drag and Drop in table
Het is de bedoeling dat er items vanuit een 'zijbalk' in een tabel wordt gesleept (je kan dat het item op verschillende plaatsten kan plaatsen).
Hier een voorbeeld, al wat in de richting van wat je vraagt.
Wat ben je hier verder mee van plan?
(
TO DO: jquery en jquery-ui downloaden en integreren
http://jqueryui.com/download
)
Code (php)
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
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
<html>
<head>
<style>
#drag1 {background-color: #ffff00;}
#drag2 {background-color: #ff00ff;}
#drag3 {background-color: #00ffff;}
.draggable {
width: 50px;
Height: 50px;
margin: 5px;
border: solid 1px #000000;
}
table {
width: 500px;
}
tr {
height: 100px;
}
</style>
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery-ui-1.8.17.custom.min.js"></script>
<script>
$(function() {
$(".draggable").draggable(); // selecteer de selector van elementen die kunnen "gedragd" worden
$(".droppable").droppable({ // selecteer de selector van elementen waar men in mag "droppen"
drop: onDrop // wanneer iets gedropt is, voeren we volgende functie uit
});
});
function onDrop( event, ui ) {
var dropElement = this;
var dragElement = ui.draggable;
// laat ons, als voorbeeld, de background van het drop element veranderen in de background van het drag element
$(dropElement).css(
'background-color',
$(dragElement).css('background-color')
);
}
</script>
</head>
<body>
<div class="draggable" id="drag1">1</div>
<div class="draggable" id="drag2">2</div>
<div class="draggable" id="drag3">3</div>
<table border="1">
<tr>
<td class="droppable"> </td>
<td class="droppable"> </td>
</tr>
<tr>
<td class="droppable"> </td>
<td class="droppable"> </td>
</tr>
</table>
</body>
</html>
<head>
<style>
#drag1 {background-color: #ffff00;}
#drag2 {background-color: #ff00ff;}
#drag3 {background-color: #00ffff;}
.draggable {
width: 50px;
Height: 50px;
margin: 5px;
border: solid 1px #000000;
}
table {
width: 500px;
}
tr {
height: 100px;
}
</style>
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery-ui-1.8.17.custom.min.js"></script>
<script>
$(function() {
$(".draggable").draggable(); // selecteer de selector van elementen die kunnen "gedragd" worden
$(".droppable").droppable({ // selecteer de selector van elementen waar men in mag "droppen"
drop: onDrop // wanneer iets gedropt is, voeren we volgende functie uit
});
});
function onDrop( event, ui ) {
var dropElement = this;
var dragElement = ui.draggable;
// laat ons, als voorbeeld, de background van het drop element veranderen in de background van het drag element
$(dropElement).css(
'background-color',
$(dragElement).css('background-color')
);
}
</script>
</head>
<body>
<div class="draggable" id="drag1">1</div>
<div class="draggable" id="drag2">2</div>
<div class="draggable" id="drag3">3</div>
<table border="1">
<tr>
<td class="droppable"> </td>
<td class="droppable"> </td>
</tr>
<tr>
<td class="droppable"> </td>
<td class="droppable"> </td>
</tr>
</table>
</body>
</html>
Gewijzigd op 14/02/2012 23:52:10 door Kris Peeters