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中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
JS中递归函数
Jun 17 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
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垃圾回收机制简单说明
2010/07/22 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
php函数连续调用实例分析
2015/07/30 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
JS中操作JSON总结
2020/12/06 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
opencv 阈值分割的具体使用
2020/07/08 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
学校万圣节活动方案
2014/02/13 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
环卫工人节活动总结
2014/08/29 职场文书
赡养老人协议书范本
2015/08/06 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python