elemen menyeret jQuery dan menyusun semula elemen

elemen menyeret jQuery dan menyusun semula elemen_jquery

WBOY

Lepaskan： 2016-05-16 15:22:36

asal

1631 orang telah melayarinya

Contoh dalam artikel ini menerangkan kaedah pelaksanaan menyeret elemen dan menyusun semula elemen dengan jQuery Ia dikongsi dengan semua orang untuk rujukan anda. Kandungan pelaksanaan khusus adalah seperti berikut

Rendering:

Kandungan khusus adalah seperti berikut:

Dari gambar di atas anda boleh lihat fungsi yang ingin kami laksanakan hari ini. Apabila pengguna menyeret imej, dia boleh menukar pengisihan imej sedia ada dan mengemas kini susunan dalam jadual. Sebagai contoh, pengguna boleh menyeret reka letak tapak web kami sesuka hati, kerana Google iGoogle telah pun melaksanakannya. Ini sangat meningkatkan pengalaman pengguna.

Di bawah, kami akan melaksanakan fungsi ini langkah demi langkah.

<span id="show">
<div>
  <input id="check" type="checkbox" />
</div>
<div>
  <input type="hidden" id="orderlist" />
  <ul id="list">
    <asp:Repeater ID="rptOrder" runat="server">
    <ItemTemplate>
      <li id="<%#Eval("ID") %>" title="<%#Eval("OrderID") %>">
        <elemen menyeret jQuery dan menyusun semula elemen_jquery alt="elemen menyeret jQuery dan menyusun semula elemen_jquery" src="<%#Eval("Link") %>" />
      </li>
    </ItemTemplate>
    </asp:Repeater>   
  </ul>
</div>

Salin selepas log masuk

Terdapat butang radio Apabila pengguna memilihnya, pengisihan data dalam pangkalan data akan ditukar apabila imej diseret. Medan tersembunyi menyimpan susunan asal gambar. ul memaparkan senarai gambar.

Untuk menjadikannya lebih mudah dilihat, saya menambah sedikit gaya:

var show = jQuery("#show"); //输出提示 
var orderlist = jQuery("#orderlist"); //原顺序 
var check = jQuery("#check"); //是否更新到数据库

Salin selepas log masuk

Mula-mula simpan pemilih yang biasa digunakan supaya memanggilnya kemudian menjadi lebih mudah. Semua orang pasti tidak akan mempunyai masalah dengan yang ini. ^_^

//保存原来的排列顺序 
var order = []; 
list.children("li").each(function() { 
  order.push(this.title); //原排列顺序保存在title，得到后更改title 
  jQuery(this).attr("title", "你可以拖动进行排序"); 
}); 
orderlist.val(order.join(','));

Salin selepas log masuk

Simpan susunan isihan asal ke medan tersembunyi. Kaedah push() tatasusunan digunakan di sini, iaitu menambah tajuk (urutan susunan asal) dalam setiap li ul kepada tatasusunan. Akhir sekali, kaedah join() digunakan untuk mendapatkan susunan susunan asal dan mengembalikan rentetan. Format susunan isihan kini ialah 1,2,3.

//ajax更新 
var Update = function(itemid, itemorder) { 
  jQuery.ajax({ 
    type: "post", 
    url: "update.aspx", 
    //id:新的排列对应的ID,order：原排列顺序
    data: { id: itemid, order: orderlist.val() },  
    beforeSend: function() { 
      show.html("正在更新"); 
    }, 
    success: function() { 
      show.html("更新成功"); 
    } 
  }); 
};

Salin selepas log masuk

Seterusnya, pisahkan blok kemas kini ajax secara berasingan. Dengan cara ini program menjadi lebih bersih dan tiada perkara baru di kawasan ini.

//调用ajax更新方法 
var Submit = function(update) { 
  var order = []; 
  list.children("li").each(function() { 
    order.push(this.id); 
  }); 
  var itemid = order.join(','); 
  //如果单选框选中，则更新表中排列顺序 
  if (update) { 
    Update(itemid); 
  } 
  else { 
    show.html(""); 
  } 
};

Salin selepas log masuk

Sama seperti mendapatkan susunan isihan, ID digubah menjadi rentetan dan dihantar kepada kaedah Kemas Kini(). Kemas kini parameter dalam fungsi ialah sama ada kotak semak dipilih.

//执行排列操作 
list.sortable({ 
  opacity: 0.7, 
  update: function() { 
    Submit(check.attr("checked")); 
  } 
});

Salin selepas log masuk

Akhir sekali, lakukan operasi pengisihan. Bahagian latar belakang ialah kemas kini ID semasa yang sepadan dengan susunan asal saya percaya semua orang sudah biasa dengannya.

Ia boleh dilihat bahawa jika tiada operasi pangkalan data dilakukan, pemalam hanya perlu memanggil jadual isih untuk menyelesaikan penyeretan elemen.

Di atas adalah kaedah pelaksanaan elemen menyeret jQuery dan menyusun semula elemen saya harap ia akan membantu pembelajaran semua orang.