编程 Javascript

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 相关文章推荐

兼容FireFox 的 js 日历支持时间的获取

Mar 04 Javascript

Wordpress ThickBox 点击图片显示下一张图的修改方法

Dec 11 Javascript

JavaScript 垃圾回收机制分析

Oct 10 Javascript

javascript修改IMG标签的src问题

Mar 28 Javascript

js如何判断用户是在PC端和还是移动端访问

Apr 24 Javascript

Express作者TJ告别Node.js奔向Go

Jul 14 Javascript

JS判断Android、iOS或浏览器的多种方法(四种方法)

Jun 29 Javascript

vue父组件向子组件传递多个数据的实例

Mar 01 Javascript

微信小程序实现简单文字跑马灯

May 26 Javascript

Vuex的各个模块封装的实现

Jun 05 Javascript

原生Js 实现的简单无缝滚动轮播图的示例代码

May 10 Javascript

JavaScript如何利用Promise控制并发请求个数

May 14 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