ドラッグ可能なdivの位置をデータベースに保存する方法は？

Question

私はjuqeryによって生成されたdivsを四角形の枠の中にドラッグして、これらのdivの位置をデータベースに保存したいのですか？ MYデータベースのフィールドは、 table_name（テーブルに与えるランダムな名前）、 x（左上）、 （右上）のフィールドがあります。

jqueryのは、次のとおりです。

function collision($div1, $div2) { 
     var x1 = $div1.offset().left; 
     var y1 = $div1.offset().top; 
     var h1 = $div1.outerHeight(true); 
     var w1 = $div1.outerWidth(true); 
     var b1 = y1 + h1; 
     var r1 = x1 + w1; 

     var x2 = $div2.offset().left; 
     var y2 = $div2.offset().top; 
     var h2 = $div2.outerHeight(true); 
     var w2 = $div2.outerWidth(true); 
     var b2 = y2 + h2; 
     var r2 = x2 + w2; 

     if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false; 
     return true; 
    } 

    drag(); 
    function drag() { 
     $(".drag-table").draggable({ 
      start: function(event, ui) { 
       $(this).removeClass('drag-table-obstacle'); 
      }, 
      stop: function(event, ui) { 
       $(this).addClass('drag-table-obstacle'); 
      }, 
      obstacle: ".drag-table-obstacle", 
      preventCollision: true, 
      containment: ".moveInHere" 
     }); 
    } 

    create_drag(); 
    function create_drag() { 
     $(".not-drag-table").draggable({ 
      start: function(event, ui) { 
       $(this).removeClass('drag-table-obstacle'); 
      }, 
      stop: function(event, ui) { 
       $(this).addClass('drag-table-obstacle'); 

       var $table = $('.moveInHere'); 

       if (collision($table, $(ui.helper))) { 
        var check = false; 
        var count = $table.find('.drag-table-obstacle').length; 

        for(i=1; i<=count; i++) { 
         if (collision($table.find('.drag-table-obstacle:nth-child('+i+')'), $(ui.helper))) { 
          check = true; break; 
         } 
        } 

        if (!check) { 
         $(ui.helper).clone(true).appendTo($table).html(count + 1).addClass('drag-table').removeClass('not-drag-table'); 
         drag(); 
        } 
       } 
      }, 
      helper: 'clone', 
      obstacle: ".drag-table-obstacle", 
      preventCollision: true, 
      containment: "body" 
     }); 
    } 

HTMLコード：

<div class="drag-container navbar-header"> 
      <div class="not-drag-table drag-table-obstacle drag-style-square color-bg-green color-white"></div> 

      <div class="not-drag-table drag-table-obstacle drag-style-rectangle color-bg-red color-white"></div> 

      <div class="not-drag-table drag-table-obstacle drag-style-circle color-bg-blue color-white"></div> 
     </div> 
    <div class="container"> 

     <div class="moveInHere"> 
      <div class="drag-table-obstacle drag-style-rectangle color-bg-black color-white" style="width: 152px;height: 152px;"><b style="color:#ff59a0">Blocked area</b></div> 
     </div> 

    </div> 

Answer 1

この

<div class="not-drag-table drag-table-obstacle drag-style-square color-bg-green color-white"><input type="checkbox" name="myDiv[]" style="display:none" value="color-bg-green" /></div> 

<div class="not-drag-table drag-table-obstacle drag-style-rectangle color-bg-red color-white"><input type="checkbox" style="display:none" name="myDiv[]" value="color-bg-red" /></div> 

のように、同じ名前の隠されたチェックボックスを追加して、自分の中で名前によって、それを取得する必要がありますプログラミング言語を使用すると、UI側と同じ順序で表示されます。

あなたはパッチと言うことができますが、それは動作します。

お手伝いします。 myDivへ

変更]チェックボックス名は[] PHPで 、

<?php 
    if(isset($_POST['submit'])){//to run PHP script on submit 
    if(!empty($_POST['myDiv'])){ 
     // Loop to store and display values of individual checked checkbox. 
     foreach($_POST['myDiv'] as $selected){ 
     echo $selected."</br>"; 
     } 
    } 
}?>