天天看点
返回

网页中的table拖拽排序

公司需求，后台需要做一个表格拖拽排序的功能。想了想，先在百度上找找插件，看能不能快速点实现，找了几分钟，发现貌似插件都挺重的，后面就想自己结合新的api写写看，于是有了这篇文章：

已下是我在w3c找的资料。w3c上面的资料

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />

</body>
</html>

可以先看下这文章中的代码，w3c中其实也写的很详细了。

那我们就按着思路照样子写呗

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>产品列表</title>
</head>
<body>
    


    

<style>
    p { margin: 0; }
    .search input { width: 150px; height: 20px; margin: 6px; border-radius: 10px; padding-left: 10px; border: 1px solid rgb(216, 216, 216); outline: none; }
    .search a { padding: 1px 5px; border-radius: 3px; text-decoration: none; background: rgb(16, 170, 156); color: #FFFFFF; font-family: "Microsoft YaHei", "微软雅黑", helvetica, arial, verdana, tahoma, sans-serif; font-size: 14px; }
    .product-list { width: 100%; position: absolute; }
    .product-list #table { width: 100%; }
    .product-list #table img { width: 40px; height: 40px; }
    #table thead tr th { width: 33.3333333%; text-align: center; line-height: 50px; height: 50px; font-size: 20px; border-right: 0.01rem solid rgb(216, 216, 216); }
    #table tr { border: 0.01rem solid rgb(216, 216, 216); }
    #table tr td { width: 33.3333333%; text-align: center; line-height: 35px; height: 35px; font-size: 15px; border-right: 0.01rem solid rgb(216, 216, 216); }
    #table tbody tr:hover { background-color: rgb(216, 216, 216); cursor: move; }
    #table tbody tr:nth-child(odd) { background-color: #F5F5F5; }
    #table tbody tr:nth-child(even) { background-color: #fff; }
    .save { height: 100px; line-height: 100px; text-align: center; }
</style>
<div class="search">
    <form class="search-form">       
        <a id="search" href="javascript:void(0);" target="_blank" rel="external nofollow" >搜索</a>
    </form>

</div>
<div class="product-list">
    <table id="table">
        <thead>
            <tr><th>Id</th><th>产品名</th><th>原始排序</th></tr>
        </thead>
        <tbody>
            
                <tr data-id="0" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>0</td><td>产品0</td><td>0</td></tr>
                <tr data-id="1" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>1</td><td>产品1</td><td>2</td></tr>
                <tr data-id="2" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>2</td><td>产品2</td><td>3</td></tr>
                <tr data-id="3" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>3</td><td>产品3</td><td>4</td></tr>
                <tr data-id="4" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>4</td><td>产品4</td><td>5</td></tr>
                <tr data-id="5" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>5</td><td>产品5</td><td>7</td></tr>
                <tr data-id="6" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>6</td><td>产品6</td><td>8</td></tr>
                <tr data-id="7" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>7</td><td>产品7</td><td>9</td></tr>
                <tr data-id="8" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>8</td><td>产品8</td><td>10</td></tr>
                <tr data-id="9" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>9</td><td>产品9</td><td>11</td></tr>
                <tr data-id="10" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>10</td><td>产品10</td><td>12</td></tr>
                <tr data-id="11" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>11</td><td>产品11</td><td>13</td></tr>
                <tr data-id="12" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>12</td><td>产品12</td><td>15</td></tr>
                <tr data-id="13" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>13</td><td>产品13</td><td>16</td></tr>
                <tr data-id="14" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>14</td><td>产品14</td><td>17</td></tr>
                <tr data-id="15" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>15</td><td>产品15</td><td>18</td></tr>
                <tr data-id="16" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>16</td><td>产品16</td><td>19</td></tr>
                <tr data-id="17" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>17</td><td>产品17</td><td>20</td></tr>
                <tr data-id="18" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>18</td><td>产品18</td><td>21</td></tr>
                <tr data-id="19" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>19</td><td>产品19</td><td>22</td></tr>
                <tr data-id="20" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>20</td><td>产品20</td><td>23</td></tr>
                <tr data-id="21" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>21</td><td>产品21</td><td>24</td></tr>
                <tr data-id="22" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>22</td><td>产品22</td><td>25</td></tr>
                <tr data-id="23" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>23</td><td>产品23</td><td>26</td></tr>
                <tr data-id="24" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>24</td><td>产品24</td><td>27</td></tr>
                <tr data-id="25" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>25</td><td>产品25</td><td>29</td></tr>
                <tr data-id="26" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>26</td><td>产品26</td><td>31</td></tr>
                <tr data-id="27" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>27</td><td>产品27</td><td>32</td></tr>
                <tr data-id="28" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>28</td><td>产品28</td><td>35</td></tr>
                <tr data-id="29" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>29</td><td>产品29</td><td>36</td></tr>
                <tr data-id="30" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>30</td><td>产品30</td><td>38</td></tr>
                <tr data-id="31" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>31</td><td>产品31</td><td>42</td></tr>
                <tr data-id="32" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>32</td><td>产品32</td><td>45</td></tr>
                <tr data-id="33" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>33</td><td>产品33</td><td>47</td></tr>
                <tr data-id="34" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>34</td><td>产品34</td><td>51</td></tr>
                <tr data-id="35" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>35</td><td>产品35</td><td>52</td></tr>
                <tr data-id="36" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>36</td><td>产品36</td><td>53</td></tr>
                <tr data-id="37" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>37</td><td>产品37</td><td>55</td></tr>
                <tr data-id="38" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>38</td><td>产品38</td><td>57</td></tr>
                <tr data-id="39" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>39</td><td>产品39</td><td>59</td></tr>
                <tr data-id="40" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>40</td><td>产品40</td><td>60</td></tr>
                <tr data-id="41" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>41</td><td>产品41</td><td>61</td></tr>
                <tr data-id="42" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>42</td><td>产品42</td><td>63</td></tr>
                <tr data-id="43" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>43</td><td>产品43</td><td>69</td></tr>
                <tr data-id="44" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>44</td><td>产品44</td><td>71</td></tr>
                <tr data-id="45" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>45</td><td>产品45</td><td>72</td></tr>
                <tr data-id="46" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>46</td><td>产品46</td><td>73</td></tr>
                <tr data-id="47" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>47</td><td>产品47</td><td>74</td></tr>
                <tr data-id="48" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>48</td><td>产品48</td><td>77</td></tr>
                <tr data-id="49" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>49</td><td>产品49</td><td>78</td></tr>
                <tr data-id="50" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>50</td><td>产品50</td><td>79</td></tr>
                <tr data-id="51" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>51</td><td>产品51</td><td>82</td></tr>
                <tr data-id="52" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>52</td><td>产品52</td><td>84</td></tr>
                <tr data-id="53" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>53</td><td>产品53</td><td>85</td></tr>
                <tr data-id="54" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>54</td><td>产品54</td><td>86</td></tr>
                <tr data-id="55" iscopy='0' ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true"><td>55</td><td>产品55</td><td>87</td></tr>
            
        </tbody>

    </table>
    <div class="save">
        <label><input type="button" class="btn btn-secondary radius product-add" value="保存" /></label>
    </div>
</div>

    <!--_footer 作为公共模版分离出去-->
    <script type="text/javascript" src="/content/hadmin/lib/jquery/1.9.1/jquery.min.js"></script>
    

    <script>
        function drag(ev) {

            //console.log("1111drag");
            //console.log($(ev.target).data("id"));
            ev.dataTransfer.setData("Text", $(ev.target).data("id"));
        }
        function allowDrop(ev) {

            //console.log("22222allowDrop");
            ev.preventDefault();
        }



        function drop(ev) {
            //console.log("3333drop");
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            //console.log(data);

            //console.log(ev.target);
            //var clone = ($("tr[data-id='" + data + "']").prop("outerHTML"));
            var clone = ($("tr[data-id='" + data + "']").clone());//记住是克隆方法
            clone.attr("iscopy", "1");//先赋值=1
            //console.log(clone);
            //var clone = $("tr[data-id='" + data + "']").clone();
            //console.log(clone);
            //console.log(typeof clone);
            //clone.attr("iscopy") = "1";
            $(ev.target).parent().after(clone);
            //还需移除当前拷贝的那个对象
            $("tr[data-id='" + data + "'][iscopy='0']").remove();//这个等于0的就是 原来存在于页面上的数据 移除即可
            //console.log($("tr[data-id='" + data + "']"));
            $("tr[data-id='" + data + "']").attr("iscopy", "0");//然后再将当前值改回0就好了
        }
       
    </script>
    <script>
        $(function () {
            $(".save .product-add").click(function () {
                if (confirm("确定修改吗？")) {                                      
                    //console.log($("#table tbody tr td:eq(0)"));
                    var ids = "";
                    $("#table tbody tr").each(function (i, e) {
                        //console.log($(e).find("td:eq(0)").text());
                        ids += $(e).find("td:eq(0)").text() + ",";//得到全部id了
                    });
                    $.ajax({
                        url: "/product/listorder",
                        type: "post",
                        data: { "ids": ids, "istb": istb, "rid": Math.random() },
                        dataType: "json",
                        error: function () {                            alert("操作失败:后台程序运行报错！");
                            
                        },
                        success: function (data) {
                           
                        },
                    });
                }
            });





        });
       
    </script>

</body>
</html>

其实看代码很简单的。

把请求发到了后台了，后台接收一下idlist，然后遍历，直接更新数据库即可。

感觉很久没写jq的代码了，先前在写$().data()的时候 浏览器总是报错，后面看了好久才发现我写错了，我写成了 $().data()="";这就很尴尬了，还有在写attr也是 写成了 $().attr()="";我心里还奇怪呢，卧槽怎么报错了？

对了，上面这种attr还是感觉不太合适，建议用$().data()来存储数据，但是我在写的时候出了一些问题，后面也就放弃了。你们可以自己试试哈。

还有个问题就是，我发现很多群里都非常看不起jq，哈哈，不知道为什么，其实我还是觉得jq挺好用的，在元素选择上面，用起来贼方便。还有一些异步操作，哈哈，也许人家的vue更加厉害些吧。

对于后端来说，jq简直就是神器了，哈哈，vue等前端框架也试了试，都还挺不错的，不过没有特定要求基本上也不会用,做条咸鱼，美滋滋

前端遇到的一些问题 jq 拖拽排序
上一篇: 基于jquery的div拖拽功能
下一篇: php拖拽生产网页,JavaScript实现网页拖拽的方法

继续阅读