Rumah  >  Artikel  >  hujung hadapan web  >  jquery melaksanakan pergerakan label ke atas, bawah, dan top_jquery

jquery melaksanakan pergerakan label ke atas, bawah, dan top_jquery

WBOY
WBOYasal
2016-05-16 16:02:081453semak imbas

cth: Contohnya, dalam senarai teg di latar belakang, fungsi bergerak ke atas, bergerak ke bawah dan melekat pada bahagian atas direalisasikan

Idea pelaksanaan utama ialah operasi nod, contohnya: naikkan, teruskan item yang diklik ke nod sebelumnya, dan seterusnya, sudah tentu, pelaksanaan kod sebenar perlu menambah beberapa pertimbangan, seperti sama ada semasa diklik item operasi sudah berada di bawah Atau ia ditetapkan ke bawah Jika ya, gesaan yang sepadan akan diberikan untuk memberitahu operator apa yang berlaku.

Perkara:

1. Kaedah pengklonan yang digunakan dahulu.klon(benar):

Maksudnya, simpan item yang sedang dialihkan untuk kegunaan kemudian.

2. Cari elemen berkaitan yang sepadan dengan teg semasa dan kaedah berkaitannya:

Contohnya: teg .prev() pada elemen semasa

teg .next() di bawah elemen semasa

Tambah kaedah selepas .after()xxx

.before() Tambahkan kaedah sebelum xxx

.prapend kaedah penambahan

3. Pelaksanaan

Kod khusus adalah seperti berikut:

var productsLabel = { 
  //设置置顶 
  setHot: function(t){ 
    var bar = 'showAndHide_box'; 
    var obj = $(t).parents('.'+bar).clone(true); 
    $(t).parents('.'+bar).remove(); 
    $(".showAndHide_list_box").prepend(obj); 
  },

  //设置上移 
  setUp: function(t){ 
    var bar = 'showAndHide_box'; 
    if($(t).parents('.'+ bar).prev('.'+bar).html() != undefined){ 
      var obj = $(t).parents('.'+bar).clone(true); 
      $(t).parents('.'+bar).prev().before(obj); 
      $(t).parents('.'+bar).remove(); 
    }else{ 
      alert('亲,现在已是最上的哦,不能再上移了...'); 
    } 
  },

  //设置下移 
  setDown: function(t){ 
    var bar = 'showAndHide_box'; 
    if($(t).parents('.'+bar).next('.'+bar).html() != undefined){ 
      var obj = $(t).parents('.'+bar).clone(true); 
      $(t).parents('.'+bar).next().after(obj); 
      $(t).parents('.'+bar).remove(); 
    }else{ 
      alert('亲,现在已是最下的哦,不能再下移了...'); 
    } 
  } 
}

Di atas adalah semua kandungan yang dikongsi dengan anda dalam artikel ini, saya harap anda akan menyukainya.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn