Jquery拖拽并简单保存的实现代码

但是如何保存顺序呢，想到了cookie，但是用如何用cookie保存顺序呢，直接保存html代码下次读取覆盖可以，但是总感觉内容多的话 保存的东西比较多，后用ui插件获取id保存id在读取实现了顺序的保存，废话不多说..直接看代码...

代码如下:

<!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.3.2.min.js" type="text/javascript"></script>
<script src="ui.core.js" type="text/javascript"></script>
<script src="ui.sortable.js" type="text/javascript"></script>
<script src="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 })
}
});
$(".qlink").click(function() {
alert(this.className);
});
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> <a href="#" class="qlink">上传</a> </li>
<li id="myList_blog"><a href="#">日志</a> <a href="#" class="qlink">发表</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>

呵呵.. 这下看到了效果，不足方面望高手赐教....

赞 (0)

相关推荐

  • jquery 可拖拽的窗体控件实现代码

    所以要引入JQUERY框架. 把我的这个控件代码放到一个js文件里面直接引入就可以了 控件代码 复制代码 代码如下: $.fn.myDrag = function() { var self = $(this); self.css("position", "absolute"); var p = self.position(); self.css({ left: p.left, top: p.top }); self.mousedown( function(event

  • jQuery拖拽插件gridster使用指南

    jQuery拖拽插件gridster使用指南

    gridster.js 是一个 jQuery 插件用来构建直观的可拖放的布局,支持多列布局,你还可以动态的添加和删除表格中的元素. 1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本地测试总是出现这样那样的问题,一是无法移动,二是在磁铁的附近有一个黑点,可能是定位使用的.但是如果在网站中正常使用,应该不会出现这样的黑点.gridster插件的属性和

  • 基于jquery实现的鼠标拖拽元素复制并写入效果

    直接上代码: 复制代码 代码如下: <!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> <meta http-eq

  • jQuery实现的简单拖拽功能示例

    jQuery实现的简单拖拽功能示例

    本文实例讲述了jQuery实现的简单拖拽功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; ba

  • 基于jquery的一个拖拽到指定区域内的效果

    这个可与前两个不同了,这个是拖拽到指定的区域内的特效.其实逻辑方式差不多,只不过不同的是 找到目标元素,用appendTo 的方法插入到目标元素. 具体的代码如下,有兴趣者可以试下.(由于是初学,做的简单,如果有其他的方法请给下指点,我定感激不尽哈...) 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/htm

  • jQuery 版元素拖拽原型代码

    本文主要针对拖拽原型进行解析,给刚接触 JQuery 的爱好者一个简单的示例.在引入 Jquery.js 后: 复制代码 代码如下: <script type="text/javascript"> $(function(){ //绑定拖动元素对象 bindDrag(document.getElementById('test')); }); function bindDrag(el){ //初始化参数 var els = el.style, //鼠标的 X 和 Y 轴坐标 x

  • JQuery之拖拽插件实现代码

    而很多页面效果都要用到这些位置.不得已,得练练,得记记. 下面就来说说这个基于 JQuery的简易拖拽插件吧. 按惯例,先说说拖拽的原理,以及搞这么一个东东的步骤: 那什么是拖拽呢? 看名字就知道了:就是把一个东东拖来拽去的. 放到我们的DOM上,就是改变它的位置. 它只有两个难点:1.如何知道是在拖? 2.如何知道从哪拖,拖到哪? 其实,这也算不上难点,毕竟两者都是基础的东西,关键在于熟练. 换到js 中,我们搞一个拖拽效果,大致有如下步骤: 1.让元素捕获事件(一般情况下,无非就是mouse

  • jQuery拖拽div实现思路

    思路是利用jquery的mousemove,mousedown,mouseup三个事件,定义两个相对位置,分别是 1.组件左上角与屏幕左上角的相对位置 2.鼠标所在坐标与组件左上角的相对位置. 具体函数如下: 复制代码 代码如下: .drag{ position:absolute; background:#0000CC; top:100px;left:200px; padding:0; } 复制代码 代码如下: $(document).ready(function(){ var move=fal

  • 简单的jquery拖拽排序效果实现代码

    步骤: 1.实现随鼠标移动的效果: 2.初始化一个元素及其坐标: 3.拖拽对象的最后坐标,与元素的坐标 进行计算和判断 来确定 要插入的目标元素: 4.用insertBefore 方法 插入到目标元素的前面 具体代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

  • JQuery UI的拖拽功能实现方法小结

    JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念. ource:拖拽源,要拖动的元素. taerget:拖放目标,能够放入source的容器. 拖拽的动作分解如下: 1. drag start:在拖拽源(source)上按下鼠标并开始移动 2. drag move: 移动过程中 3. drag enter: 移动进入目标(target)容器 4.

  • Jquery实现自定义窗口随意的拖拽

    在网页上我们经常看到,当点击一个按钮时,弹出一个自定义窗口,并且可以随意的拖拽,从而改变其位置 使用jquery实现拖拽,则必须要jquery的文件了,实现步骤: 1.引入jquery文件 2.编写js脚本 具体代码: html代码: 复制代码 代码如下: <button id="show">显示</button> <div class="win"> <div class="wTop"><p

  • jquery实现简单的拖拽效果实例兼容所有主流浏览器

    jquery实现简单的拖拽效果实例兼容所有主流浏览器

    最近发现web网页的拖拽效果,个人觉得是一种不错的用户体验,抽空研究了一下,原理还蛮简单的,下面贴一下我写的一个简单拖拽jquery自定义函数. jquery代码:fun.js 复制代码 代码如下: jQuery.fn.myDrag=function(){ _IsMove = 0; _MouseLeft = 0; _MouseTop = 0; return $(this).bind("mousemove",function(e){ if(_IsMove==1){ $(this).off

  • jQuery手机浏览器中拖拽动作的艰难性分析

    jQuery手机浏览器中拖拽动作的艰难性分析

    本文实例分析了jQuery手机浏览器中拖拽动作的艰难性.分享给大家供大家参考.具体如下: 本想在手机网页中实现一个如iphone可以随意拖动的控制按钮的,但是最后发现竹篮打水一场空, 虽然拖拽动作在手机浏览器中司空见惯,但是在手机浏览器中,要想实现可以被拖拽的组件,却是一件不可能的事情. 先来看看在PC网页中,拖拽动作是怎么做的, 首先,我们有一个按钮,点击有动作,一直按着不放,可以随意拖动,就像iphone可以随意拖动的控制按钮一样, 如上图的灰色图层,写出来也不甚容易, 首先,要把灰色图层的

随机推荐