divtagを移動してmysqlに位置を保存しますか？

Question

divタグを「ロック解除」してから、PHPスクリプトでmysqlデータベースにその位置を保存すると、自分のウェブサイトのユーザーがdivタグを「移動」できるようにしたいと考えています。したがって、ユーザーが再度ログオンすると、divタグは正しい場所に配置されます。

私はcssでdivタグをpostする方法を知っていて、css内のphp variblesを使用してデータベースからデータを取得しています。私はちょうどそれを格納するためにdivタグの位置を取得する方法を知りませんか？たぶん、AJAXなどを使用していますか？

歓迎、ありがとうございます。

Answer 1

ポジションはどういう意味ですか？それは "左、右、中央..."か、ピクセル単位の位置ですか？

ピクセル単位の場合は、topとbottomのCSSプロパティを使用してください。カスタムポジションの場合は、ポジションを変更するときにコールバックを行います。

javascriptを使用して位置を簡単に取得できます。一度設定すると、非同期で保存する必要があります。ええ、ajaxはいいです。その1のための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スクリプトAJAXを使用します。ここで使用jQueryjQuery ...

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

を使用して簡単な例であり、それは人生がずっと容易になります。 ..

HTML：

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

はJavaScript：

$('#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を持つ2つの保存可能な要素を持っている場合は、それを行うならば、PHP（$_POST）にポストされたデータは、次のようになります。

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

することはでき、その後explodeすることにより、各文字列カンマで区切り、それぞれのintをx座標とy座標として取得します。