All geek questions in one place

How to keep the position of dragged and resized elements?

I am creating a website that allows users to create an html page that can then be saved and distributed on another site. I want them to be able to resize and drag page elements. I can do this with jQuery, but I'm not sure how to save it so that when viewing the page elsewhere it looks the same.

I have not yet decided how to save the page information, but I think that I can store each element in the database along with its absolute position and its contents. Does that sound like a good plan?

If so, how do I get the position for the transition of the div to php so that it can be saved?

Thanks.

+4
source share
2 answers

JQueryUI Resizable has an event called resize that you can use:

 var resposition = ''; $('#divresize').resizable({ //options... resize: function(event,ui){ resposition = ui.position; } });

The same thing happens with JQueryUI Draggable and its drag event:

 var dragposition = ''; $('#divdrag').draggable({ // options... drag: funciton(event,ui){ dragposition = ui.position; } });

resposition and dragposition will be arrays. You can see how it works here: http://jsbin.com/uvuzi5

EDIT: using a form, you can save dragposition and resposition to hidden inputs

 var inputres = '<input type="hidden" id="resposition" value="'+resposition.left+','+resposition.top+'"/>' $('#myform').append(inputres); var inputdrag = '<input type="hidden" id="dragposition" value="'+dragposition.left+','+dragposition.top+'"/>' $('#myform').append(inputdrag);

And in your PHP file for processing the form:

 $dragposition = $_GET['dragposition']; $resposition = $_GET['resposition']; $dragposition = explode(',',$dragposition); $resposition = explode(',',$resposition);

Finally, both variables must be arrays with top and left attributes:

 $dragposition => [top,left] attributes from draggable $resposition => [top,left] attributes from resizable
+12
source

you need to save the position in some place so that you can get the detail position the next time you open the page.

option 1: you can store position data of html elements in the local store of the browser "localStorage". Example: Demo

 <!DOCTYPE html> <html lang="en"> <head> <title>Dashboard</title> <!-- jQuery --> <script src="vendor/jquery/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="dist/css/jquery-ui.min.css"> <script src="dist/js/jquery-ui.min.js"></script> </head> <body> <script> var positions = JSON.parse(localStorage.positions || "{}"); $(function() { var d = $("[id=draggable]").attr("id", function(i) { return "draggable_" + i }) $.each(positions, function(id, pos) { $("#" + id).css(pos) }) d.draggable({ containment: "#wrapper", scroll: false, stop: function(event, ui) { positions[this.id] = ui.position localStorage.positions = JSON.stringify(positions) } }); }); </script> <div id="wrapper"> <div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div1</div> <div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div2</div> <div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div3</div> </div> </body> </html>

option 2: you can save the position details of the html elements in "your database"

0
source

Source: https://habr.com/ru/post/1343684/

More articles:


All Articles