draggable div의 위치를 ​​데이터베이스에 저장하는 방법은 무엇입니까?

Question

글쎄 나는 juqery에 의해 생성 된 divs를 직사각형 상자 안에 드래그하여 이제 데이터베이스에 divs의 위치를 ​​저장하고 싶습니까? 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>"; 
     } 
    } 
}?>