JQuery, PHP ve Mysql kullanarak Sürükle, Bırak, Sırala, Kaydet

• 13-12-2016
• Admin
• 6636 Okunma
• Paylaş
• Paylaş
• Paylaş

Mysql

CREATE TABLE IF NOT EXISTS `dragdrop` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `text` varchar(255) DEFAULT NULL,
  `sirano` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;

--
-- Tablo döküm verisi `lab_dragdrop`
--

INSERT INTO `dragdrop` (`id`, `text`, `sirano`) VALUES
(1, 'Makale 1', 1),
(2, 'Makale 2', 2),
(3, 'Makale 3', 6),
(4, 'Makale 4', 3),
(5, 'Makale 5', 5),
(6, 'Makale 6', 4),
(7, 'Makale 7', 7);

connect.php

	$host	=	"localhost";  
	$user	=	"root";
	$pass	=	"";
	$db		=	"veritabani";
   
try {
     $db = new PDO("mysql:host=localhost;dbname=".$db.";charset=utf8", $user, $pass);
} catch ( PDOException $e ){
     echo 'Baglanti kurulamadi: '.$e->getMessage();
}
$db->query("SET CHARACTER SET uf8"); 
$db->exec("SET NAMES 'utf8'; SET CHARSET 'utf8'");

index.php < head > içi

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>

index.php head içi css

ul {
	padding:0px;
	margin: 0px;
}
#response {
	padding:10px;
	background-color:#9F9;
	border:2px solid #396;
	margin-bottom:20px;
}
#list li {
	margin: 0 0 3px;
	padding:8px;
	background-color:#333;
	color:#fff;
	list-style: none;
}

index.php head içi script

$(document).ready(function(){ 	
	  function slideout(){
  setTimeout(function(){
  $("#response").slideUp("slow", function () {
      });
    
}, 2000);}
	
    $("#response").hide();
	$(function() {
	$("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {
			
			var order = $(this).sortable("serialize") + '&update=update'; 
			$.post("updateList.php", order, function(theResponse){
				$("#response").html(theResponse);
				$("#response").slideDown('slow');
				slideout();
			}); 															 
		}								  
		});
	});

});	

index.php body içi

<div id="container">
  <div id="list">

    <div id="response"> </div>

index.php body içi

include("connect.php");
			
$query = $db->query("SELECT id, text FROM dragdrop ORDER BY sirano ASC", PDO::FETCH_ASSOC);

foreach( $query as $row ){	
					
				$id = stripslashes($row['id']);
				$text = stripslashes($row['text']);

echo '<li id="arrayorder_'.$id.'">'.$id.' '.$text.'<div class="clear"></div>
      </li>';	}

updateList.php

include("connect.php");
$dizi	= $_POST['arrayorder'];

if ($_POST['update'] == "update"){
	
	$count = 1;
	foreach ($dizi as $idler) {
$idler2 = htmlspecialchars(trim($idler));
try {

	$query = $db->query("UPDATE dragdrop SET sirano = '$count' WHERE id = '$idler2'");
} catch(PDOException $ex) {
    echo "Hata İşlem Yapılamadı!"; 
    some_logging_function($ex->getMessage());
}
		$count ++;		

	}
	echo 'Tüm sıralama işlemi gerçekleştirildi.';
Linkten demoyu görebilirsiniz

Linkten demoyu görebilirsiniz