Как сохранить положение перетаскиваемых и изменяемых размеров элементов? - PullRequest
Новая
       17

Как сохранить положение перетаскиваемых и изменяемых размеров элементов?

4 голосов
/ 14 марта 2011

Я создаю сайт, который позволяет пользователям создавать HTML-страницы, которые затем могут быть сохранены и опубликованы на другом сайте. Я хочу, чтобы они могли изменять размеры и перетаскивать элементы страницы. Я могу сделать это с помощью jQuery, но я не уверен, как сохранить его, чтобы при просмотре страницы в другом месте она выглядела одинаково.

Я еще не решил, как хранить информацию о странице, но я думаю, что могу хранить каждый элемент в базе данных вместе с его абсолютным положением и его содержимым. Это похоже на хороший план?

Если так, как я могу получить позицию для div, чтобы передать php, чтобы он мог быть сохранен?

Спасибо.

Ответы [ 2 ]

13 голосов
/ 15 марта 2011

JQueryUI Resizable имеет событие под названием resize, которое вы можете использовать: 

var resposition = '';

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

То же самое происходит с JQueryUI Draggable и его событием drag: 

var dragposition = '';

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

resposition и dragposition будут массивами.Вы можете видеть, что это работает здесь: http://jsbin.com/uvuzi5

РЕДАКТИРОВАТЬ: используя форму, вы можете сохранить dragposition и resposition в скрытых вводах 

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);

И в своем PHP-файле:обработать форму: 

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

Наконец, обе переменные должны быть массивами с атрибутами top и left: 

$dragposition => [top,left] attributes from draggable
$resposition => [top,left] attributes from resizable
0 голосов
/ 26 апреля 2017

вам нужно сохранить позицию в каком-то месте, чтобы вы могли получить информацию о позиции при следующем открытии страницы.

опция 1: вы можете хранить htmlдетали расположения элементов в "localStorage" в хранилище браузера по умолчанию. Пример: Демонстрация 

<!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>

опция 2: вы можете хранить детали положения html-элементов в «вашей базе данных»«

...