jquery实现可拖动DIV自定义保存到数据的实例


Posted in Javascript onNovember 20, 2013

看到一个不错的jquery插件,可拖动DIV,顺序可保存到数据库的一个实例:这里就以其中PHP实例简单说明一下:

<?php  
//post到后台的数据  
    if ($_POST) {  
        $ids = $_POST["ids"];  
        for ($idx = 0; $idx < count($ids); $idx+=1) {  
            $id = $ids[$idx];  
            $ordinal = $idx;  
            //...  
        }  
        return;  
    }  
?> 
<!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>  
    <style type="text/css">  
        body { font-family:Arial; font-size:12pt; padding:20px; width: 800px; margin:20px auto; border:solid 1px black; }  
        h1 { font-size:16pt; }  
        h2 { font-size:13pt; }  
        ul { width:350px; list-style-type: none; margin:0px; padding:0px; }  
        li { float:left; padding:5px; width:100px; height:100px; }  
        li div { width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; }  
        .placeHolder div { background-color:white!important; border:dashed 1px gray !important; }  
    </style>  
</head>  
<body>  
    <div>  
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
        <h1>jQuery List DragSort PHP Example</h1>  
        <a href="https://3water.com/">Homepage</a><br/>  
        <br/>  
        <h2>Save list order with ajax:</h2>  
        <ul id="gallery">  
            <?php  
                $list = array("blue", "orange", "brown", "red", "yellow", "green", "black", "white", "purple");  
                for ($idx = 0; $idx < count($list); $idx+=1) {  
                    echo "<li data-itemid='" . $idx . "'>";  
                    echo "<div>" . $list[$idx] . "</div>";  
                    echo "</li>";  
                }  
            ?>  
        </ul>  
        <script type="text/javascript" src="jquery.dragsort-0.5.1.min.js"></script>  
        <script type="text/javascript">  
//saveOrder为回调函数  
            $("#gallery").dragsort({ dragSelector: "div", dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });  
            function saveOrder() {  
                var data = $("#gallery li").map(function() { return $(this).data("itemid"); }).get();  
            //通过ajax模拟post的方式,post格式形式为:[0, 1, 2, 5, 4, 3, 8, 6, 7]   
                $.post("example.php", { "ids[]": data });  
            };  
        </script>  
        <div style="clear:both;"></div>  
    </div>  
</body>  
</html> 
Javascript 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
详解a++和++a的区别
Aug 30 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 Javascript
JavaScript实现多维数组的方法
Nov 20 #Javascript
jQuery jcrop插件截图使用方法
Nov 20 #Javascript
javascript中的if语句使用介绍
Nov 20 #Javascript
js控制表单不能输入空格的小例子
Nov 20 #Javascript
js中Image对象以及对其预加载处理示例
Nov 20 #Javascript
JS按字节截取字符长度实例
Nov 20 #Javascript
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 #Javascript
You might like
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
web 页面分页打印的实现
2009/06/22 Javascript
JS 文件大小判断的实现代码
2010/04/07 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
python写的一个文本编辑器
2014/01/23 Python
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
如何在python中实现线性回归
2020/08/10 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
python palywright库基本使用
2021/01/21 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
一套Delphi的笔试题二
2013/05/11 面试题
村容村貌整治方案
2014/05/21 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
2014年药房工作总结
2014/11/22 职场文书
中层干部考核评语
2015/01/04 职场文书