Realtime informatie van mijn dragging div
ben al enkele uren bezig om de informatie die ik nodig heb uit jquery te ontvangen in een andere div.
Heb een dragging div gemaakt om een afbeelding "uit te lijnen" nu wil ik dus de positie realtime verversen in een textbox.
Hij verplaatst de div wel, maar geeft niet de informatie in de input box niet.
Wie kan mij helpen?
Heb het volgende:
Style:
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
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
<style>
.image_positioner{
border:1px solid #cccccc;
max-width:150px;
margin-bottom:15px;
min-height:150px;
}
.image_positioner img{
max-width:150px;
}
.image_positioner .ui-widget-content{
width:150px;
height:150px;
position:absolute;
z-index:99;
border:1px solid #FFFFFF;
cursor:move;
background-image:url(lowversiontrans.png);
}
</style>
.image_positioner{
border:1px solid #cccccc;
max-width:150px;
margin-bottom:15px;
min-height:150px;
}
.image_positioner img{
max-width:150px;
}
.image_positioner .ui-widget-content{
width:150px;
height:150px;
position:absolute;
z-index:99;
border:1px solid #FFFFFF;
cursor:move;
background-image:url(lowversiontrans.png);
}
</style>
script jquery:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<script src=\"https://code.jquery.com/jquery-1.12.4.js\"></script>
<script src=\"https://code.jquery.com/ui/1.12.1/jquery-ui.js\"></script>
<script>
$( function() {
$( \"#draggable\" ).draggable({
containment: \"parent\"
});
} );
</script>
<script src=\"https://code.jquery.com/ui/1.12.1/jquery-ui.js\"></script>
<script>
$( function() {
$( \"#draggable\" ).draggable({
containment: \"parent\"
});
} );
</script>
HTML:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div class='image_positioner'>
<div id=\"draggable\" class=\"ui-widget-content\">
</div>
<img src='imgDB/id/".$user['id'].".prof/".$profpic['value']."' alt=''/>
</div>
<input name='positionY' />
<input name='positionX' />
<div id=\"draggable\" class=\"ui-widget-content\">
</div>
<img src='imgDB/id/".$user['id'].".prof/".$profpic['value']."' alt=''/>
</div>
<input name='positionY' />
<input name='positionX' />
Gewijzigd op 18/06/2020 20:36:04 door Christian Snijders
eerste resultaat
Zoals daar (in de als oplossing gemarkeerde reactie) wordt aangehaald kun je het drag-event gebruiken om de coordinaten eruit te vissen.
Thomas van den Heuvel op 17/06/2020 22:54:12:
Google "jquery draggable coordinates"
eerste resultaat
Zoals daar (in de als oplossing gemarkeerde reactie) wordt aangehaald kun je het drag-event gebruiken om de coordinaten eruit te vissen.
eerste resultaat
Zoals daar (in de als oplossing gemarkeerde reactie) wordt aangehaald kun je het drag-event gebruiken om de coordinaten eruit te vissen.
Zat al die tijd op het verkeerde te zoeken, ik zocht op position.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
$( function() {
$( \"#draggable\" ).draggable({
containment: \"parent\"
});
} );
$( function() {
$(\"#draggable\").draggable({
drag: function(event, ui) {
containment: \"parent\"
var pos = ui.offset;
$('#posX').text(pos.left);
$('#posY').text(pos.top);
}
});
} );
</script>
$( function() {
$( \"#draggable\" ).draggable({
containment: \"parent\"
});
} );
$( function() {
$(\"#draggable\").draggable({
drag: function(event, ui) {
containment: \"parent\"
var pos = ui.offset;
$('#posX').text(pos.left);
$('#posY').text(pos.top);
}
});
} );
</script>
Nu geeft hij waardes in coordinaten, maar niet in pixes vanaf de rand van de div image_positioner hij pakt hem van de hele site, weet je daar een oplossing voor?
Gewijzigd op 18/06/2020 20:35:01 door Christian Snijders
Gewijzigd op 18/06/2020 20:36:39 door Christian Snijders
Het komt er op neer dat je het parent element (de container) definieert met position: absolute, en het draggable element met position: relative. Dan worden de coordinaten ook relatief gecommuniceerd.
En jeminee wat zaten er veel fouten in bovenstaande codefragmenten.
Een voorbeeld dat werkt wordt zoiets:
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
57
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>draggable test</title>
<style type="text/css">
.image_positioner {
position: relative; /* belangrijk! */
width: 300px;
height: 300px;
border: 1px solid #cccccc;
}
.image_positioner .ui-widget-content {
background-color: #ccccff;
width: 150px;
height: 150px;
position: absolute;
z-index: 99;
border: 0;
cursor: move;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="image_positioner">
<!-- initialisatie positie mbv style -->
<div id="draggable" class="ui-widget-content" style="top: 25px; left: 75px;"><!-- doe je ding hier met afbeeldingen? --></div>
</div>
left <input id="posX">
top <input id="posY">
<script type="text/javascript">
//<![CDATA[
$(function() {
// heleboel nutteloze blokken? dubbele declaraties?!
$('#draggable').draggable({
'containment': 'parent',
'drag': function(event, ui) {
var pos = ui.position; // NIET offset() maar position(); offset = relatief tov document, position = relatief tov parent, en alleen als container position: relative heeft
$('#posX').val(pos.left); // NIET text() maar val()
$('#posY').val(pos.top); // NIET text() maar val()
}
});
// init van waarden
$test = $('#draggable');
$('#posY').val(parseInt($test.css('top')));
$('#posX').val(parseInt($test.css('left')));
});
//]]>
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>draggable test</title>
<style type="text/css">
.image_positioner {
position: relative; /* belangrijk! */
width: 300px;
height: 300px;
border: 1px solid #cccccc;
}
.image_positioner .ui-widget-content {
background-color: #ccccff;
width: 150px;
height: 150px;
position: absolute;
z-index: 99;
border: 0;
cursor: move;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="image_positioner">
<!-- initialisatie positie mbv style -->
<div id="draggable" class="ui-widget-content" style="top: 25px; left: 75px;"><!-- doe je ding hier met afbeeldingen? --></div>
</div>
left <input id="posX">
top <input id="posY">
<script type="text/javascript">
//<![CDATA[
$(function() {
// heleboel nutteloze blokken? dubbele declaraties?!
$('#draggable').draggable({
'containment': 'parent',
'drag': function(event, ui) {
var pos = ui.position; // NIET offset() maar position(); offset = relatief tov document, position = relatief tov parent, en alleen als container position: relative heeft
$('#posX').val(pos.left); // NIET text() maar val()
$('#posY').val(pos.top); // NIET text() maar val()
}
});
// init van waarden
$test = $('#draggable');
$('#posY').val(parseInt($test.css('top')));
$('#posX').val(parseInt($test.css('left')));
});
//]]>
</script>
</body>
</html>
Thomas van den Heuvel op 19/06/2020 00:30:29:
.. volledig bericht even weggelaten ;-)
Ben ook geen kei in jquery (noem het gerust beginner), maar je hebt me zeker wel op de goede weg geholpen.
Die dubbele blokken kwam omdat er ergens een fout insloop en ik die niet direct op kon lossen (slide werkte niet meer als er een fout in die functie zat).
Dat relative heeft hem inderdaad verbeterd naar iets wat wel werkt, alleen krijg ik wel meerdere cijfers achter een komma, nu heb ik gezocht maar dan hebben ze het over toFixed(0) is dat correct? wil juist helemaal geen komma met cijfers :-/
Toevoeging op 19/06/2020 13:19:31:
Heb 'm al gevonden betreft het afronden, hij pakte parseint niet goed mee.