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 相关文章推荐
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 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常用函数 推荐收藏保存
2010/02/21 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
php实现的简单检验登陆类
2015/06/18 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
juqery 学习之四 筛选过滤
2010/11/30 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
详解JavaScript函数
2015/12/01 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
Python爬虫爬取微信朋友圈
2020/08/06 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
药店主任岗位责任制
2014/02/10 职场文书
廉洁自律承诺书
2014/03/27 职场文书
工程质量承诺书范文
2014/03/27 职场文书
促销活动总结报告
2014/04/26 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
公务员政审个人总结
2015/02/12 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
初中政治教学反思
2016/02/23 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs