Блог

ну, у меня есть эти разделы, которые генерируются juqery, которые перетаскиваются внутри прямоугольного поля, и теперь я хочу сохранить положение этих разделов в базе данных? В моей базе данных есть поля: имя_таблицы (случайное имя для присвоения таблице), x (вверху слева), y (вверху справа).

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>
  

Нужно добавить скрытый флажок с таким же именем, например

 <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>
  

и получите его по имени на вашем языке программирования, и вы получите его в том же порядке, что и на стороне пользовательского интерфейса.

Вы можете сказать, что это исправлено, но это работает.

Надеюсь, это поможет вам.

измените имя флажка на 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>";
      }
   }
}?>