Question

我有这个由juqery生成的div拖动到一个矩形框内，现在我想将这些div的位置保存到数据库中？我的数据库有以下字段： table_name（给表提供的随机名称）， 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>

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>";
      }
   }
}?>

如何将可拖动div的位置保存到数据库中？

1 个答案: