CODEWITHSUNDEEP
javascripthtmlcss
Z Holt
Z Holt

Reputation: 141

Store draggable DIV's position to MySQL database

I'd like to know if/how id be able to store the position of where I move a draggable div to on the screen, so that when the page is reloaded, it will return to were it was left.

The code is here 

function drag_start(event) {
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData("text/plain",
    (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
} 
function drag_over(event) { 
    event.preventDefault(); 
    return false; 
} 
function drop(event) { 
    var offset = event.dataTransfer.getData("text/plain").split(',');
    var dm = document.getElementById('dragme');
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
    event.preventDefault();
    return false;
} 
var dm = document.getElementById('dragme'); 
dm.addEventListener('dragstart',drag_start,false); 
document.body.addEventListener('dragover',drag_over,false); 
document.body.addEventListener('drop',drop,false); 
aside { 
    position:  absolute;
    left: 0;
    top: 0; /* set these so Chrome doesn't return 'auto' from getComputedStyle */
    width: 200px; 
    background: rgba(255,255,255,0.66); 
    border: 2px  solid rgba(0,0,0,0.5); 
    border-radius: 4px; padding: 8px;
}
<aside draggable="true" id="dragme">
    This is an aside, drag me.
</aside>
<p>I never am really satisfied that I understand anything; because, understand it well as I may, my comprehension can only be an infinitesimal fraction of all I want to understand about the many connections and relations which occur to me, how the matter in question was first thought of or arrived at, etc., etc.</p>
<p>In almost every computation a great variety of arrangements for the succession of the processes is possible, and various considerations must influence the selections amongst them for the purposes of a calculating engine. One essential object is to choose that arrangement which shall tend to reduce to a minimum the time necessary for completing the calculation.</p>
<p>Many persons who are not conversant with mathematical studies imagine that because the business of [Babbage’s Analytical Engine] is to give its results in numerical notation, the nature of its processes must consequently be arithmetical and numerical, rather than algebraical and analytical. This is an error. The engine can arrange and combine its numerical quantities exactly as if they were letters or any other general symbols; and in fact it might bring out its results in algebraical notation, were provisions made accordingly.</p>
<p>The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform. It can follow analysis, but it has no power of anticipating any analytical revelations or truths. Its province is to assist us in making available what we are already acquainted with.</p>

Upvotes: 0

Views: 630

Answers (2)

Cheitan
Cheitan

Reputation: 141

Whatever you have to store in the database, you will have to use Ajax to communicate with the server (e.g. a PhP script on a web server) that will interact with the database. JavaScript cannot itself interact with a database.

Here you can find the W3C page talking about Ajax : http://www.w3schools.com/ajax/

Pay attention to the different method on some browser like IE, some versions badly support the XmlHttpRequest object which is the Ajax base object.

In your case, depending on what you want to do, you can store only the position of the div and then at the loading of the page retrieve it for the database. Another solution, much more dirty I think, is to save the entire HTML page in the database. Ajax is able to send and bring back several types of data, such as JSON, raw text, XML, but also ready-to-use HTML that you can just inject in a div or anything else.

Hope it helps

EDIT : note that if you want to send large amount of data to the server you will have to use the POST method, which is not size-limited, instead of the GET method. GET will be ok for only sending the position of the div, but POST will be necessary if sending the full page. See here for more details.

Upvotes: 1

Kirill Voronin
Kirill Voronin

Reputation: 166

Do you really want to store it in a DB? A user can have many devices on which layout of your site (and position of div therefore) is different.

Consider storing it in Local Storage or Cookie (your example).

var pos = {left: dm.style.left, top: dm.style.top};
document.cookie = JSON.stringify(pos);
try {
    var pos = JSON.parse(document.cookie);
    dm.style.left = pos.left ? pos.left : '0px';
    dm.style.top = pos.top ? pos.top : '0px';
} catch (e) {
    // Some error handling
}

Upvotes: 1

Related Questions