MySQL에서 div 태그와 저장 위치를 ​​이동 하시겠습니까?

Question

내 웹 사이트의 사용자가 div 태그를 '잠금 해제'한 다음 PHP 스크립트에서 해당 위치를 mysql 데이터베이스에 저장하면 "이동"할 수 있기를 바랍니다. 따라서 사용자가 다시 로그인하면 div 태그가 올바른 위치에 배치됩니다.

나는 css에서 div 태그를 포스팅하는 방법을 알고 있으며, css 내에서 PHP varibles를 사용하여 데이터베이스에서 데이터를 가져온다. 나는 그것을 저장하기 위해 div 태그의 위치를 ​​얻는 방법을 모른다. 어쩌면 아약스 같은 거?

의견을 보내 주셔서 감사합니다.

Answer 1

위치는 무엇을 의미합니까? "왼쪽, 오른쪽, 가운데 ..."또는 픽셀 단위의 위치입니까?

픽셀 단위 인 경우 위쪽 및 아래쪽 CSS 속성을 사용하십시오. 사용자 정의 위치 인 경우 위치를 변경할 때 콜백 만 수행하십시오.

자바 스크립트를 사용하면 쉽게 위치를 가져올 수 있고 일단 비동기 적으로 저장하려면 원하는 경우 아약스가 좋습니다. 그 하나 jQuery를 찾기 : http://docs.jquery.com/Ajax/jQuery.post

$.post("test.php", { func: "getNameAndTime" }, 
    function(data){ 
    alert(data.name); // John 
    console.log(data.time); // 2pm 
    }, "json"); 

또한, 당신은 당신이 ajax과 많은 경험이 없어 보이는 질문을 공식화하는 방식에서. 온라인 설명서를 찾거나 멋진 책을 찾으십시오. (검색에 대해서는 이에 대한 많은 주제가 있습니다.)

Answer 2

요소의 위치가 변경되면 PHP 값을 PHP 스크립트에 게시하고 싶습니다 AJAX를 사용합니다. 여기

function storeElementPosition(elem) { 
    var off = $(elem).offset(); 
    $.post("storeElementPosition.php", 
    { elem : $(elem).attr("id"), left : off.left, top : off.top }, 
    function(resp) { 
     alert(resp); 
    } 
); 
} 

Answer 3

사용 jQuery, 그것은 인생을 훨씬 쉽게 만들 수 있습니다 jQuery를 사용하여 간단한 예는 ...입니다. ..

HTML :

<a href="javascript:void(0)" id="savelayout">Save</a> 

자바 스크립트 :

$('#savelayout').click(function(){ 
    var postData = {}; 
    $('.xy').each(function(){ 
     var id = $(this).attr('id'); 
     var pos = $(this).position(); 
     if (id && id.length){ 
      postData[$(this).attr('id')] = pos.left.toString() + ',' + pos.top.toString(); 
     } 
    }); 
    $.post('savelayout.php', postData, function(data, textStatus){ 
     if(textStatus == 'success'){ 
      alert('Positions saved successfully.'); 
     } 
    }); 
}); 

당신이 저장하려는 모든 요소를 ​​대상으로합니다 CSS 셀렉터와 $('.xy')에 .xy를 교체합니다. 당신은 당신이 "divid1"와 "divid2"ID 년대에 두 개의 저장 가능한 요소가 있다면, 그렇게되면, PHP ($_POST)에 게시 된 데이터는 다음과 같이 표시됩니다

array(
    'divid1' => '123,351', 
    'divid2' => '512,136' 
); 

할 수 있습니다 다음 explode 바이 각 문자열 각 int를 x 및 y 좌표로 가져옵니다.