[jquery] drag en drop na load()
dus nu heb ik dit
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
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
// functie die hoofdvenster verandert
function load_hoofdvenster(data)
{
blackscreen('on'); // zwart beelt aan.
blackscreen_alert('laden','laden'); // laden bericht weg
$.ajax({
type: "GET",
url: "handelaar.php" + data,
cache: true,
success: function(data1){
$('#hoofdvenster').slideUp('slow');
$('#hoofdvenster').fadeOut('slow', function() {
$('#hoofdvenster').html(data1);
$('#hoofdvenster').fadeIn('slow');
$('#hoofdvenster').slideDown('slow');
$('#module_pad').html(data)
blackscreen_alert('','laden'); // laden bericht weg
blackscreen('off'); // zwart beelt uit.
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
}
});
}
function load_hoofdvenster(data)
{
blackscreen('on'); // zwart beelt aan.
blackscreen_alert('laden','laden'); // laden bericht weg
$.ajax({
type: "GET",
url: "handelaar.php" + data,
cache: true,
success: function(data1){
$('#hoofdvenster').slideUp('slow');
$('#hoofdvenster').fadeOut('slow', function() {
$('#hoofdvenster').html(data1);
$('#hoofdvenster').fadeIn('slow');
$('#hoofdvenster').slideDown('slow');
$('#module_pad').html(data)
blackscreen_alert('','laden'); // laden bericht weg
blackscreen('off'); // zwart beelt uit.
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
}
});
}
maar de div
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<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>
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
kan ik nog steeds niet verplaatsen
sorry ben heel de dag aan het zoeken geweest maar kan niets vinden
http://gridster.net/
Het werkt prima en trouwens ook nog op mobile apparaten.
Gewijzigd op 05/01/2013 22:58:28 door Keizer Webdesign
Wat ik er mee wil doen is het beheer van categorie in de inventaris van een uitleensysteem.
hierdoor wordt het uitgevoerd op een pc en is het niet nodig om dit mobiel te maken.
Tevens probeer ik van jquery, php, sql, css,... alles zelf te maken ( toch zoveel mogelijk, er mogen fouten in zitten daar probeer ik ook uit te leren )
Code (php)
1
2
2
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<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 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>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<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 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>
</body>
</html>
nou dan kunt u deze toch in stapjes uitbreiden naar wat u wil.
dan kunt u precies vertellen wat er fout gaat en kunnen wij u antwoorden wat er misschien fout zou gaan.
ik denk dat er een fout zit bij het dit
index.php heefdt de script code en laadt met load() de html code (body) in een div in
ik weet niet hoe op te lossen
Gewijzigd op 05/01/2013 23:22:25 door php knipper
Uncaught TypeError: Object [object Object] has no method 'draggable'
alvast heel erg bedankt
Gewijzigd op 05/01/2013 23:35:15 door php knipper
RobertJan Keizer op 05/01/2013 23:06:06:
oke maar miss rare vraag maar je hebt toch wel de css toegevoegd van jquery want anders zit misschien daar de fout?
niet om het een of anderen maar dat zei ik ook al hoor ;)
Gewijzigd op 05/01/2013 23:39:53 door Keizer Webdesign
RobertJan Keizer op 05/01/2013 23:36:56:
niet om het een of anderen maar dat zei ik ook al hoor ;)
RobertJan Keizer op 05/01/2013 23:06:06:
oke maar miss rare vraag maar je hebt toch wel de css toegevoegd van jquery want anders zit misschien daar de fout?
niet om het een of anderen maar dat zei ik ook al hoor ;)
ja ik wist niet dat dat nodig was ik dacht dat je het jquery bestand bedoelde
excuseer
En kun je even een JSbin of jSfiddle aanmaken? Ik heb een idee dat je wat fout doet, wat deze code moet werken.
http://leensysteem.mych-studio.com
inloggen gaat niet maar de jquery wordt wel gebruikt en u ziet de volledige jquery dan.
Niet op de layout letten ik ben er niet zo goed in.
En ik zie daar nergens gebruik van draggable?
en met die "<!doctype html>" wordt heel mijn layout anders
==> dat is ook eigenlijk de reden dat ik ze niet zet (half mijn css werkt nu niet meer)
Gewijzigd op 06/01/2013 00:07:57 door php knipper
en dat dacht ik ook al dus miss kan alleen er uit halen wat je nodig hebt uit:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
iframe is geen optie hiervoor, ikzelf vindt het zeer onhandig om daar nu nog aan te werken, de hele site werkt alleen gaat het nu ineens mis bij wat extra jquery.
de css van jquery is niet de boosdoener wand zelfs zonder die code is mijn css nog maar half het licht aan de html tag bovenaan.
#Wouter J
De jquery werkt wel maar de css is nu bij mij in chrome half doorstreept en ik zou niet weten hoe ik dat moet oplossen (ik heb deze fout al vaker gehad daardoor zetten ik die niet, en dat ging ook redelijk goed. Maar als ik hier een oplossing voor weet ga ik dat toch toepassen).
en stoppen? Als ik ergens aan begin stop ik daar niet mee voor het af en werkend is ( sorry zo ben ik nu eenmaal ingesteld, wie op u rekent kan je niet in de koud laten, de functie van drag en drop mag er uit maar ik zou niet weten wat ik anders kan toepassen )
Echt waar al heel erg bedankt dat jullie me helpen met dit.
<hr>
he wacht geen px bij font size ( het zijn mijn fouten bij css ik geef geen maten aan )
deze ga ik snel even goed maken, maar eerst de jquery draaien krijgen
opgelost ==> Weeral bijgeleerdt
Gewijzigd op 06/01/2013 00:27:26 door php knipper