Drag and drop submit knop
Ik wil graag een drag and drop submit knop.
Dit is een voorbeeldje: http://jqueryui.com/demos/droppable/
Ik weet dat de source erbij staat, maar ik krijg het niet helemaal werkende. Het wordt gewoon tekst die ik niet kan verslepen. Ook weet ik niet hoe ik de gebruiker moet doorsturen, zodra ze de div 'gedropt' hebben.
Kan iemand me hier mee helpen? Ik heb gewoon een simpele <html><head>... pagina gemaakt met de code erin. Ik kan alleen niets verplaatsen.
Iemand een heel basis voorbeeldje voor me? Alvast bedankt!
Groeten,
Victor
Het enige wat ik include is:
Code (php)
1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Dit is de code die ik in m'n test pagina heb staan:
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
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
<html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<div class="demo">
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</div><!-- End demo -->
<div class="demo-description" style="display: none; ">
<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
</div><!-- End demo-description -->
</body>
</html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<div class="demo">
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</div><!-- End demo -->
<div class="demo-description" style="display: none; ">
<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
</div><!-- End demo-description -->
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
Gewijzigd op 19/07/2012 11:26:31 door Wouter J
Toevoeging op 20/07/2012 11:45:25:
Toevoeging op deze vraag.. kan je er ook voor zorgen dat er een php script word uitgevoerd zodra je de afbeelding heb gedropt en zoja, hoe?