You doubt Draggable’s position

Asked

Viewed 43 times

0

I need to ask you a question! I’m creating a Dashboard to Administer a site, but I’m having a hard time figuring it out, because when I place an image on the scale I want, but when I update it, it’s in the desired position on the page of the site, but is exactly the measure of its width on the right in the Adm Panel.

As well as I do not know if I could express myself to the point of understanding my doubt, I am attaching the access address for friends to verify what is happening

Page of the Adm Panel: http://www.buziosnegocios.com.br/teste/admin/painel/topo.php

Landing page (Website): http://www.buziosnegocios.com.br/teste/topo.php

I also publish the Adm. page code for analysis.

<script type="text/javascript">
 $(window).load(function () {

 // Posicionamento do LogoTipo
 $('#logoWrapper').draggable({
    drag: function (e) {
        var offset = $(this).find('img').offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posXimg').val(xPos);
        $('#posYimg').val(yPos);
    }
});

// Tamanho do LogoTipo
$('#logo').resizable({
    resize: function (event, ui) {
        var endW = $(this).outerWidth();
        var endH = $(this).outerHeight();

        $('#posWimg').val(endW);
        $('#posHimg').val(endH);

    }
});

// Posicionamento da Barra Menu
$('#menuWrapper').draggable({
    drag: function (e) {
        var offset = $(this).find('ul').offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posXul').val(xPos);
        $('#posYul').val(yPos);
    }
});
});
</script>
</head>
<body style="margin:0 auto; background:#FFF;">

<div style="margin:0 auto; height:130px; width:1024px; background:#CCC;">

<div id="logoWrapper">
<?php
$logo = $_POST['logo'];
$hori_logo = $_POST['hori_logo'];
$vert_logo = $_POST['vert_logo'];
$larg_logo = $_POST['larg_logo'];
$altu_logo = $_POST['altu_logo'];

$query = mysql_query("SELECT * FROM topo");
$res = mysql_fetch_array($query);
?>

<img width="<?php echo $res['larg_logo'];?>" height="<?php echo $res['altu_logo'];?>" title="LogoTipo" src="../../upload/<?php echo $res['logo'];?>" id="logo" class="ui-draggable ui-draggable-handle" style="cursor: move; position:absolute; left: <?php echo $res['hori_logo'];?>px; top: <?php echo $res['vert_logo'];?>px;" />
</div>

<div style="position:absolute; cursor:move; left: <?php echo $res['hori_menu'];?>px; top: <?php echo $res['vert_menu'];?>px;" id="menuWrapper">
<?php //include "menu/barra_menu.php"; ?>
</div>
</div>

<?php if(isset($_POST['enter'])){

$logo = $_POST['logo'];
$hori_logo = $_POST['hori_logo'];
$vert_logo = $_POST['vert_logo'];
$larg_logo = $_POST['larg_logo'];
$altu_logo = $_POST['altu_logo'];

$update = mysql_query("UPDATE topo SET hori_logo = '$hori_logo', vert_logo = '$vert_logo', larg_logo = '$larg_logo', altu_logo = '$altu_logo', hori_menu = '$hori_menu', vert_menu = '$vert_menu'");

if($update == ''){

echo "<script language='javascript'>
window.alert('Erro ao atualizar dados!!!');
</script>";
}else{
echo "<meta http-equiv='refresh' content='0; URL= ../painel/topo.php'>
<script language='javascript'>
window.alert('Dados atualizados com sucesso!');
</script>";
}}
?>

If you need something more, just ask that I will be publishing what you need so you can help me solve this problem of my image placement on the Adm Panel page.

Already thanking everyone for their attention, with a strong hug.

  • It got a little complicated to know what your real problem is. If it’s something related to jQuery, look at the examples of the site, I learned a lot about jQuery from it https://jqueryui.com/draggable/

  • Hello Leonardo good morning! I apologize, because it really got a little complicated my question, but come on, I’ll try to explain it to you. At this address (http://www.buziosnegocios.com.br/teste/admin/painel/topo.php) I move the logo to the position I wish and update. But when you compare the placement with the landing page at the address (http://www.buziosnegocios.com.br/teste/topo.php), it is in the desired position. Already in the Panel it is always to the right of where it should be. Give a tested in the addresses mentioned here, to see what is happening. Hug!!!

1 answer

1

That’s because property is being applied position: relative; together with the id #logoWrapper on the page of Administrative Panel, which I assume is because of class="ui-draggable" implemented on this same line by jQuery-UI.

To solve this problem, just make the id #logoWrapper be it relativo from the beginning adding the CSS below to your style sheet, so this will always be relative making this problem disappear. And then just put the value left:0; as the initial position of the logo, instead of - left:173px;.

#logoWrapper {
    position: relative;
}

or directly in HTML:

<div id="logoWrapper" style="position:relative;">
  • I was putting this **<div id="logoWrapper"> ** inside this <div style="margin:0 auto; height:130px; width:1024px; background:#CCC;"> another, and that was causing the difference between the pages. Now I ask friends, how could you make them work together, that is, one <div> within the other, without giving the difference of positioning? If anyone can give me a hint, I will be grateful!

  • That doesn’t make much sense @Murilocabral ... because this div prior to logo-Wrapper does not even have reasons or attributes to do such a thing, and it is present on the two pages with the same attributes. The problem with that is where I already mentioned it in my answer. Have you tried doing what I said my answer?

  • On the part of "two 2 Divs working inside each other" I didn’t quite understand what you meant by that, but these divs should even be turned into one, because the first div is not there doing anything, these same attributes can be attributed to the id="logoWrapper". Example: <div id="logoWrapper" style="position:relative; margin:0 auto; height:130px; width:1024px; background:#CCC;">

Browser other questions tagged

You are not signed in. Login or sign up in order to post.