首页新闻找找看学习计划

如何实现拖拽DOM后内容依然按顺序排列?

0
悬赏园豆:10 [待解决问题]

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>元素拖拽</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        
        .container {
            position: relative;
            top: 200px;
            left: 200px;
            width: 900px;
            line-height: 200px;
            background: green;
        }
        
        .container div {
            display: inline-block;
            width: 150px;
            margin-left: 20px;
            line-height: 100px;
            text-align: center;
            background: yellow;
        }
    </style>
</head>

<body>
    <div id="container" class="container">
        <div id="box1" class="box" data-id='1' data-index="1" draggable="true">1</div>
        <div id="box2" class="box" data-id='2' data-index="2" draggable="true">2</div>
        <div id="box3" class="box" data-id='3' data-index="3" draggable="true">3</div>
        <div id="box4" class="box" data-id='4' data-index="4" draggable="true">4</div>
        <div id="box5" class="box" data-id='5' data-index="5" draggable="true">5</div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        var source = null,
            dataIndex,
            dataID,
            text;

        //循环每一个元素
        $('.box').each(function(index, ele) {
            //被拖拽元素进入目标元素阻止元素默认事件
            $(ele).on('dragover', function(e) {
                e.preventDefault();
            })

            //被拖拽元素开始移动
            $(ele).on('dragstart', function(e) {
                //获取当前被拖拽元素
                source = $(this);
                //获取当前被拖拽元素的data-index
                dataIndex = $(this).attr('data-index')
                text = $(this).text()
                dataId = $(this).attr('data-id')
            })

            //目标元素已接受被拖拽元素
            $(ele).on('drop', function(e) {
                e.preventDefault();
                //判断被拖拽元素的data-index是否小于、等于或者大于目标元素的data-index
                if(dataIndex < $(this).attr('data-index')) {
                    //如果小于向后移动
                    moveDown(source, $(this))
                } else if(dataIndex === $(this).attr('data-index')) {
                    //如果等于不执行操作
                    return
                } else {
                    //如果大于向前移动
                    moveUp(source, $(this));
                }
                //目标元素的内容更改为被拖拽元素内容
                // $(this).text(text)
                $(this).attr('data-id',dataId)
            })
        });
        
        
        //向后移动元素
        function moveDown(se, ce) {
            //获取被拖拽元素的上一个元素内容
            // var t = $(se).next().text();
            //获取被拖拽元素的上一个元素data-id
            var d = $(se).next().attr('data-id');
            //把当前拖拽的元素内容更换成它的上一个元素
            // $(se).text(t);
            //把当前拖拽的元素data-id更换成它的下一个元素data-id
            $(se).attr('data-id',d)
            //把当前拖拽元素替换为它的下一个元素
            se = $(se).next();
            //判断当前拖拽元素的title是否和目标元素title相等
            if($(se).attr('data-index') === $(ce).attr('data-index')) {
                //如果当前拖拽元素等于目标元素,不作任何操作
                return false;
            } else {
                //如果不相等,递归,继续向后添加元素,把拖拽对象放到目标对象后面,(直到拖拽对象等于目标对象为止)
                //console.info(se,ce)
                moveDown(se, ce);
            }
        }
        //向前移动元素
        function moveUp(se, ce) {
            //获取被拖拽元素的上一个元素内容
            // var t = $(se).prev().text();
            //获取被拖拽元素的上一个元素data-id
            var d = $(se).prev().attr('data-id');
            //把当前拖拽的元素内容更换成它的上一个元素
            // $(se).text(t);
            //把当前拖拽的元素data-id更换成它的下一个元素data-id
            $(se).attr('data-id',d)
            //把当前拖拽元素替换为它的下一个元素
            se = $(se).prev();
            //判断当前拖拽元素的title是否和目标元素title相等
            if($(se).attr('data-index') === $(ce).attr('data-index')) {
                //如果当前拖拽元素等于目标元素,不作任何操作
                return false;
            } else {
                //如果不相等,递归,继续向后添加元素,把拖拽对象放到目标对象后面,(直到拖拽对象等于目标对象为止)
                //console.info(se,ce)
                moveUp(se, ce);
            }
        }
    </script>
</body>

</html>

这是我自己写的,只实现了更换data-id属性, 如果才能实现更换整个DOM,并且DOM里的内容是1,2,3,4,5这样排列呢?求大佬指教。。。

沧海的雨季的主页 沧海的雨季 | 初学一级 | 园豆:125
提问于:2019-06-11 23:16

下次提问记得创建一个 codepen : https://codepen.io/anon/pen/xobzGX

不如隐茶去 2个月前
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册