twisted-dev twisted-dev - 1 month ago 4
HTML Question

How to save the position of the draggable divs onto the database?

well i have this divs that are generated by juqery dragged inside a rectangle box and now i want to save the position of those divs into database? MY database has the fields:
table_name(random name to give to table) ,
x(top-left),
y(top-right).

the jquery is:

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

<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

Need to add hidden checkbox with same name, like this

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

and get it by name in your programming language, and you will get it into same order as UI side.

You can say it patch but it works.

Hope it helps you.

change checkbox name to myDiv[] In 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>";
      }
   }
}?>