드래그 가능한 요소와 크기를 조정할 수있는 요소의 위치는 어떻게 저장합니까?

나는 사용자가 저장하고 다른 사이트에서 공유 할 수있는 HTML 페이지를 만들 수있는 사이트를 만들고 있습니다. 페이지 요소를 크기를 조정하고 끌 수 있기를 바랍니다. jQuery를 사용하여이 작업을 수행 할 수는 있지만 어떻게 저장하면 페이지를 다른 곳에서 볼 때 동일하게 보일지 확신 할 수 없습니다.드래그 가능한 요소와 크기를 조정할 수있는 요소의 위치는 어떻게 저장합니까?

페이지 정보를 저장하는 방법을 아직 결정하지 않았지만, 데이터베이스의 각 요소를 절대 위치 및 내용과 함께 저장할 수 있다고 생각합니다. 그게 좋은 계획 같아?

그렇다면 어떻게 저장할 수 있도록 div에 대한 위치를 PHP로 전달합니까?

감사합니다.

var resposition = ''; 

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

같은이 JQueryUI 드래그 가능한 및 이벤트 drag 발생 :

var dragposition = ''; 

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

resposition 및 dragposition가 배열 될 것입니다

출처

2011-03-14 Sharon

JQueryUI 크기 조정은 사용할 수 resize라는 이벤트가 있습니다. 현재 작업을 볼 수 있습니다 http://jsbin.com/uvuzi5

편집 :

$dragposition = $_GET['dragposition']; 
$resposition = $_GET['resposition']; 
$dragposition = explode(',',$dragposition); 
$resposition = explode(',',$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 및 resposition을 절약 할 수 있습니다

마지막으로 두 변수 모두 위쪽 및 왼쪽 속성이있는 배열이어야합니다.

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

출처

2011-03-14 21:37:31

감사에서 HTML 요소의 위치 정보를 저장할 수 있습니다, 그것은 도움이됩니다. 페이지를 저장할 때 어떻게 그 위치를 저장합니까? 사용자가이 모든 작업을 수행 한 다음 '저장'을 클릭했다고 가정 해 봅시다 ... 양식을 위치 및 크기 요소로 전달하는 방법은 무엇입니까? – Sharon

@Sharon 제 대답을 편집합니다. 나는 그것이 당신을 돕기를 바란다 : –

고맙다. 그것이 명확해진다. 그것을 줄 것이다! 다시 한 번 감사드립니다. 정말 감사드립니다. – Sharon

다음에 페이지를 열면 위치가 세부 정보를 얻을 수 있도록 위치를 저장해야합니다.

옵션 1 : 당신은 "로컬 스토리지"기본 브라우저 저장에서 HTML 요소의 위치 정보를 저장할 수 있습니다. 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>

옵션 2 :는 "데이터베이스"

출처

2017-04-26 14:55:11

드래그 가능한 요소와 크기를 조정할 수있는 요소의 위치는 어떻게 저장합니까?

답변

관련 문제