Etiket: sürükle bırak

jQuery ile sürükle bırak yaparak sıralama işlemi

Sıralamadan kastım, kategori sıralama olabilir, eklenti sıralama olabilir, yazı sıralama olabilir vb.. Normalde sıralama işlemlerini yapabilmek için epeyce kod yazmaktan ziyade kullanıcının nasıl en rahat şekilde kullanabileceğinin hesabını kitabını sıklıkla yapıyoruz. Sağolsun  jQuery‘ nin Ui (kullanıcı arayüzü (user interface)) imdadımıza yetişiyor. Önce  sıralama (sortable) fonksiyonunu kullanıyoruz, daha sonra veriyi serileştiriyoruz (serialize) sonrada ajax ile postalıyoruz.Hemen kodlarımıza bakalım. Öncelikle bu iki dosyayı  Jquery Ui indirelim ve sayfamıza ekleyelim.Veritabanımızdaki kategoriler tablomuz.

	CREATE TABLE [kategoriler] (
	  [id] int IDENTITY(1, 1) NOT NULL,
	  [kategoriadi] nvarchar(50) NULL,
	  [sira] int NULL,
	  PRIMARY KEY CLUSTERED ([id])
	)
	ON [PRIMARY]
	GO

 

sirala.aspx sayfamızın içeriği

	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>

	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		margin-top: 10px;
	}
	#icerik ul{
	    margin:0;width:300px
	}
	#icerik ul li {
		list-style: none;
		margin: 0 0 4px 0;
		padding: 5px;
		background-color:#007dd5;
		color:#fff;
	}
	#icerik li:hover{
	    cursor:move;
	}
	.yeniyer{border:2px dotted #860101}

<script type="text/javascript">
$(document).ready(function(){
    $(function() {
	    $("#icerik ul").sortable({
	        placeholder: 'yeniyer',
	        opacity: 0.6,
	        cursor: 'move',
	        update: function() {
		    var order = $(this).sortable("serialize");
		    $.post("kaydet.aspx", order);
	    }
	    });
    });
});
</script>

	<div id="icerik">
        <ul>
	         <asp:Literal runat="server" ID="liste"></asp:Literal>
        </ul>
    </div>

Sirala.aspx.cs sayfamızın içeriği

 protected void Page_Load(object sender, EventArgs e)
 {
 if(!IsPostBack)
 {
 listeDoldur();
 }
 }
 
protected void listeDoldur() {
 DataTable dt = veritabani.DataTableGetir("select * from kategoriler order by sira asc");
 foreach (DataRow dr in dt.Rows)
 {
 liste.Text += "

	<li id="\&quot;sira_&quot;">" + dr["kategoriadi"].ToString() + "</li>

";
 }
 }

kaydet.aspx.cs sayfamızın içeriği, yani sıralama işlemlerini veritabanına yazan sayfamız.

 protected void Page_Load(object sender, EventArgs e)
 {
 string gelen = Request.Form.ToString().Replace("%5b%5d", "[]").Replace("sira[]=", "");
 char[] ayrac = new char[] { '&amp;' };
 string[] gelenler = gelen.Split(ayrac);
 int i = 1;
 foreach (string veri in gelenler)
 {
 veritabani.guncelle("Update kategoriler set sira='" + i + "' where id=" + veri + " ");
 i++;
 }
 }

Örneğin tamamını indirmek için tıklayın. Çalışan örneğe buradan bakabilirsiniz.