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跨页面保存变量做菜单的方法
Jan 17 Javascript
xml转json的js代码
Aug 28 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
javascript实现简易数码时钟
Mar 30 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动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
jQuery实现购物车全功能
2021/01/11 jQuery
numpy找出array中的最大值,最小值实例
2018/04/03 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
在家更换处方镜片:Lensabl
2019/05/01 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
推广普通话标语
2014/06/27 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
教育读书笔记
2015/07/02 职场文书
寒假致家长的一封信
2015/10/10 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
解决Oracle数据库用户密码过期
2022/05/11 Oracle
Android Studio 计算器开发
2022/05/20 Java/Android