Rumah > hujung hadapan web > tutorial js > Kaedah jQuery untuk menyeret elemen dan menyimpan pesanan dengan cookies_jquery

Kaedah jQuery untuk menyeret elemen dan menyimpan pesanan dengan cookies_jquery

WBOY
Lepaskan: 2016-05-16 15:14:44
asal
1740 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan penyeretan elemen dan kuki untuk menyimpan pesanan. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

div

{

border: 1px solid red;

}

#myList

{

padding-top: 20px;

width: 500px;

background: #EEE;

list-style-type: none;

}

#myList li

{

height: 30px;

cursor: pointer;

margin: 20px;

border: 1px solid blue;

}

#myList a

{

text-decoration: none;

color: #0077B0;

}

#myList a:hover

{

text-decoration: underline;

}

#myList .qlink

{

font-size: 12px;

color: #666;

margin-left: 10px;

}

</style>

<script src="jquery-1.6.2.min.js" type="text/javascript"></script>

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

<script src="jquery.cookie.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {

$("#myList").sortable({ delay: 1, containment: "div",connectWith: ".otherlist", stop: function() {

//alert($("#myList").sortable("serialize"));

//alert($("#myList").sortable("toArray"));

$.cookie("myCookie",$("#myList").sortable('toArray'),{ expires: 7 });

//alert($.cookie("myCookie"));

}});

if ($.cookie("myCookie")) {

var ids = $.cookie("myCookie").split(",");

for (var i = 0; i < ids.length; i++) {

$("#" + ids[i]).appendTo("#myList");

}}

});

</script>

</head>

<body>

<div>

<ul id="myList">

<li id="myList_mood"><a href="#">心情</a> </li>

<li id="myList_photo"><a href="#">相册</a> </li>

<li id="myList_blog"><a href="#">日志</a> </li>

<li id="myList_vote"><a href="#">投票</a> </li>

<li id="myList_shate"><a href="#">分享</a> </li>

<li id="myList_group"><a href="#">群组</a> </li>

</ul>

</div>

</body>

</html>

Salin selepas log masuk

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas di tapak ini: "Kesan seretan JQuery dan ringkasan teknik", "ringkasan kesan khas klasik biasa jQuery", " ringkasan kemahiran sambungan jQuery", "ringkasan penggunaan pemilih jquery" dan "ringkasan kemahiran operasi biasa jquery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan