Realtime informatie van mijn dragging div

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Advanced Mendix Developer Order Management Systeme

Advanced Mendix Developer Order Management Systemen (NL) Den Haag HBO/WO IT Professional "Als Advanced Mendix Developer impact maken op de groeiende e-commerce markt? Je doet dit bij PostNL door met je DevOps team onze Mendix applicaties verder te ontwikkelen, waarbij je complexe logistieke business processen vertaalt naar applicaties die ons primaire proces ondersteunen". Wat ga je doen? PostNL wordt een postal tech company We nemen de ontwikkeling van onze IT applicaties in eigen hand door onze eigen software-ontwikkel-capability op te zetten. Als Advanced Mendix Developer ben je onderdeel van een multidisciplinair, agile werkend Business-IT-team. Samen met dit team bouw je onze logistieke IT-applicaties verder

Bekijk vacature »

Christian Snijders

Christian Snijders

17/06/2020 17:33:00
Quote Anchor link
Hallo,

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)
PHP script in nieuw venster Selecteer het PHP script
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
<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)
PHP script in nieuw venster Selecteer het PHP script
1
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>

HTML:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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' />
Gewijzigd op 18/06/2020 20:36:04 door Christian Snijders
 
PHP hulp

PHP hulp

22/10/2021 17:51:03
 
Thomas van den Heuvel

Thomas van den Heuvel

17/06/2020 22:54:12
Quote Anchor link
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.
 
- Ariën -
Beheerder

- Ariën -

18/06/2020 00:22:30
Quote Anchor link
En voor code blokken hebben we ook code-tags.
 
Christian Snijders

Christian Snijders

18/06/2020 20:06:06
Quote Anchor link
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.

Zat al die tijd op het verkeerde te zoeken, ik zocht op position.

Nu heb ik dit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>

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
 
- Ariën -
Beheerder

- Ariën -

18/06/2020 20:09:14
Quote Anchor link
Kan je het tussen code-tags plaatsen?
 
Christian Snijders

Christian Snijders

18/06/2020 20:34:22
Quote Anchor link
Is aangepast ;-)
Gewijzigd op 18/06/2020 20:36:39 door Christian Snijders
 
Thomas van den Heuvel

Thomas van den Heuvel

19/06/2020 00:30:29
Quote Anchor link
Wederom was dit een enkele (jquery draggable relative position) zoekopdracht weg.

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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>
 
Christian Snijders

Christian Snijders

19/06/2020 13:14:30
Quote Anchor link
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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.