How to i save style="position: relative; left: 77px; top: -14px;" in php variable

Question

One of my div dynamically outputs this:

style="position: relative; left: 77px; top: -14px;"

while i use dragging.

How can i save this in a php variable and store it in the database.

`$var = 'style="position: relative; left: 77px; top: -14px;"'` You mean something like this? — Rizier123, Dec 06 '14 at 13:30
One solution could be to use JavaScript/jQuery to get the position of the element and to put those values into `` elements of a form that gets posted to the php/webserver — ckuijjer, Dec 06 '14 at 13:32
But if OP is _dragging_ it, wouldn't the position keep changing continuously? The form technique cannot be used if that is the case. But, sending the position continuously to another PHP page and keeping track of the values, continuously with fixed intervals (something like sampling an analog wave), in an array would be an option. But I think there should be a better method. — pradeepcep, Dec 06 '14 at 13:37
Hey Shuhad, what do you mean by dragging? Do you mean you are actually dragging the *div* around on your screen, in a way that the left and top attributes would change every second? — Félix Adriyel Gagnon-Grenier, Dec 06 '14 at 13:40
Yes , I have several divs and when i drag them , their position changes. I want those positions so that next time i open the page i want their last position. — Shuhad zaman, Dec 06 '14 at 13:55
In that case, you can send the position values of the div to a PHP page when you _stop_ dragging, and then store it in a database. You could do this with the jQuery, or Ajax. — pradeepcep, Dec 06 '14 at 13:58

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Here is one way of doing it. But please note that this uses jQuery, jQuery UI and a PHP page to handle and save the data. In other words, this is an inefficient mess. Someone should be coming up with a better way shortly.

This answer uses code from this answer, thanks to Simen Echholt: https://stackoverflow.com/a/4139860/3186769

To see if the div was dragged, we first check if there is a mousedown event on the div. If there is, then we check if there is a mousemove event on it before there is a mouseup. If there is, then the div has been dragged.

We post the left and top position of the div if it has been dragged. Here is the javascript to implement this:

// For the sake of simplicity, let us assume the div had an id "d".

$(function() {
    var isDragging = false;
    $("#d")
    .mousedown(function() {
        $(window).mousemove(function() {
            isDragging = true;
            $(window).unbind("mousemove");
        });
    })
    .mouseup(function() {
        var wasDragging = isDragging;
        isDragging = false;
        $(window).unbind("mousemove");
        if (wasDragging) {
            var left = $("#d").position().left;
            var top = $("#d").position().top;
            $.post("backend.php", {left: left, top: top});
        }
    });

    $("#d").draggable();  // allow the div to be dragged.
});

Here is an example of what backend.php could look like. This is the PHP page that our javascript is posting to.

<?php

if (isset($_POST['left']) && isset($_POST['top']))
{
  $db = new mysqli("localhost", "test", "test", "test") or die("This error message will not be visible on your HTML page unless you add a function in the jQuery post method to handle the returned output");
  $res = $db->query("INSERT INTO rememberPosition (left, top) values (" . $db->escape_string($_POST['left']) . ", " . $db->escape_string($_POST['top']) . ")");
  $db->close();
}

?>

The HTML for the div is pretty simple, and it should look something like this:

<div id="d" style="<?php require('memory.php'); echo $styleString; ?>">Here is a div with super-powers... It can actually fly around :)</div>

where we load the saved position values in memory.php. Here is an example of what memory.php could look like:

<?php

$styleString = "position: relative; left: 0px; top: 0px;";

$db = new mysqli("localhost", "test", "test", "test") or die("Error connecting to database.");
if ($res = $db->query("SELECT left, top FROM rememberPosition"))
{
    if ($row = $res->fetch_assoc())
    {
        $styleString = "position: relative; left: " . $row['left'] . "px; top: " . $row['top'] . "px;";
    }
}
$db->close()

?>

Hope that helps :) You should wait for a better method, before using this one.

EDIT:

You should add jQuery and jQuery UI for this example to work.

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

Thanks for your help. I followed your instruction and modified my code and it worked. — Shuhad zaman, Dec 08 '14 at 09:37

score 0 · Answer 2 · answered Dec 06 '14 at 13:36

Any of the below will work

$var = "style=\"position: relative; left: 77px; top: -14px;\"";
$var = 'style="position: relative; left: 77px; top: -14px;"';
$var = addslashes('style="position: relative; left: 77px; top: -14px;"');

That last one is really pointless, but I figured I'd put it there for reference. I'd suggest the middle option as the best way.

The database insertion will take care of any necessary escaping, assuming you use prepared. statement.

How to i save style="position: relative; left: 77px; top: -14px;" in php variable

2 Answers2

EDIT: