Rumah > Artikel > hujung hadapan web > jquery melaksanakan pergerakan label ke atas, bawah, dan top_jquery
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.