Drag and Drop with jQuery and PHP

15 ต.ค. 2016 , 2,778 Views , หมวดหมู่ jQuery,JavaScript,Ajax MySQL PHP ทุกหมวดหมู่ โค๊ดดิ้ง ,

home.php

<?php
//layount
$query = " SELECT * FROM app_layout 
					WHERE userid=".$_SESSION['authenticated_user_id']."
					ORDER BY layoutsort ASC ";
$res_layout =  $mysqli->query($query);	
require_once("include/home.layout.php");
?>
<style>
		/* Sortable ******************/
/*		#sortable .divcontent { 
			margin:0;
			border: 1px solid #F5F5F5;
		}
*/		#sortable div span,.div-move {
			cursor: move;
		}
	@media (min-width: 768px) {
		#sortable .col-md-6{
			overflow-y:auto;height:350px;
			border:dashed #eeeeee;
			border-width:1px;
		}
	}
		#divsaved {
			position:absolute;left: 40%;top:30%;z-index: 1;
			display:none;
		}
</style>
<div class="alert alert-success" id="divsaved" role="alert">Layout Saved</div>

<div class="row" id="sortable">
<?php $cy=0; while($rowlayout = $res_layout->fetch_array()){ $cy++; 
		$fncname = "get_".$rowlayout['layoutname'];
		if (function_exists($fncname)){
?>
	<div class="col-md-6" id="<?php echo $rowlayout['layoutid']; ?>">
		<?php 
			$fncname(); 
		?>
	</div>
<?php }} ?>
</div>
<script type="text/javascript">
/*
* Author : Ali Aboussebaba
* Email : bewebdeveloper@gmail.com
* Website : http://www.bewebdeveloper.com
* Subject : Dynamic Drag and Drop with jQuery and PHP
*/

$(function() {
    $('#sortable').sortable({
        opacity: 0.7,
        handle: '.page-header',
        update: function(event, ui) {
            var list_sortable = $(this).sortable('toArray').toString();
    		// change order in the database using Ajax
            $.ajax({
                url: 'blank.php?module=index&action=setLayout',
                type: 'POST',
                data: {list_order:list_sortable},
                success: function(data) {
                    //finished
					$('#divsaved').fadeIn(1000);
					$('#divsaved').fadeOut(1000);
                }
            });
        }
    }); // fin sortable
});
</script>

<?php

//layount

$query = " SELECT * FROM app_layout

WHERE userid=".$_SESSION['authenticated_user_id']."

ORDER BY layoutsort ASC ";

$res_layout = $mysqli->query($query);

require_once("include/home.layout.php");

<style>

/* Sortable ******************/

/* #sortable .divcontent {

margin:0;

border: 1px solid #F5F5F5;

}

*/ #sortable div span,.div-move {

cursor: move;

}

@media (min-width: 768px) {

#sortable .col-md-6{

overflow-y:auto;height:350px;

border:dashed #eeeeee;

border-width:1px;

}

#divsaved {

position:absolute;left: 40%;top:30%;z-index: 1;

display:none;

}

</style>

<div class="alert alert-success" id="divsaved" role="alert">Layout Saved</div>

<?php $cy=0; while($rowlayout = $res_layout->fetch_array()){ $cy++;

$fncname = "get_".$rowlayout['layoutname'];

if (function_exists($fncname)){

<?php

$fncname();

</div>

<?php }} ?>

</div>

* Author : Ali Aboussebaba

* Email : bewebdeveloper@gmail.com

* Website : http://www.bewebdeveloper.com

* Subject : Dynamic Drag and Drop with jQuery and PHP

$(function() {

$('#sortable').sortable({

opacity: 0.7,

handle: '.page-header',

update: function(event, ui) {

var list_sortable = $(this).sortable('toArray').toString();

// change order in the database using Ajax

$.ajax({

url: 'blank.php?module=index&action=setLayout',

type: 'POST',

data: {list_order:list_sortable},

success: function(data) {

//finished

$('#divsaved').fadeIn(1000);

$('#divsaved').fadeOut(1000);

}

});

}

}); // fin sortable

});

</script>

setLayout.php

<?php
// get the list of items id separated by cama (,)
$list_order = input_post('list_order');
// convert the string list to an array
$list = explode(',' , $list_order);
$i = 1 ;
foreach($list as $id) {
	$query = " UPDATE app_layout SET layoutsort=".$i." 
						WHERE  userid=".$_SESSION['authenticated_user_id']." AND layoutid=".$id;
	$res_update =  $mysqli->query($query);	
	$i++ ;
}
?>

<?php

// get the list of items id separated by cama (,)

$list_order = input_post('list_order');

// convert the string list to an array

$list = explode(',' , $list_order);

$i = 1 ;

foreach($list as $id) {

$query = " UPDATE app_layout SET layoutsort=".$i."

WHERE userid=".$_SESSION['authenticated_user_id']." AND layoutid=".$id;

$res_update = $mysqli->query($query);

$i++ ;

}

ดูเพิ่มเติม http://www.bewebdeveloper.com/tutorial-about-dynamic-drag-and-drop-with-jquery-and-php

Drag and Drop with jQuery and PHP

หมวดหมู่

ติดต่อเรา

ติดตามเรา

Drag and Drop with jQuery and PHP

หมวดหมู่

Popular Posts

ป้ายกำกับ

ติดต่อเรา

ติดตามเรา