类似支付宝的扣款顺序拖拉拽实现

最新推荐文章于 2021-04-08 16:11:08 发布

萌萌1126_

最新推荐文章于 2021-04-08 16:11:08 发布

阅读量645

点赞数

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/qq_35888841/article/details/111549186

版权

前端专栏收录该内容

13 篇文章

订阅专栏

使用js实现类似支付宝的扣款顺序，(拖拉拽)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        ul{
            width: 50%;
        }
        ul li {
            list-style: none;
            background-color: #fff;
            border-bottom: 1px solid #eee;
            /* line-height: 20; */
            height: 40px;
            line-height: 40px;
            padding-left: 15px;
            position: relative;
        }
        ul li span{
            color: #404040;
        }
        ul  li img{
            width: 25px;
            height: 25px;
            position: absolute;
            right: 10px;
            /* line-height: 40px; */
            top: 10px;
        }
    </style>
</head>
<body>
<ul ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
    <li draggable="true" ondragstart="dragstart_handler(event);" ondrag="dragging(event)"><span>花呗</span>
        <img src="drag.png"></li>
    <li draggable="true" ondragstart="dragstart_handler(event);" ondrag="dragging(event)" ><div><span>花呗1</span>
        <img src="drag.png" draggable="false"></div></li>
    <li draggable="true" ondragstart="dragstart_handler(event);" ondrag="dragging(event)"><div><span>花呗2</span><img src="drag.png" draggable="false"></div></li>
    <li draggable="true" ondragstart="dragstart_handler(event);" ondrag="dragging(event)"><div><span>花呗3</span><img src="drag.png" draggable="false"></div></li>
    <li draggable="true" ondragstart="dragstart_handler(event);" ondrag="dragging(event)"><div><span>花呗4</span><img src="drag.png" draggable="false"></div></li>

</ul>
</body>

<script type="text/javascript">
    var uls = document.querySelector('ul');
    var offsetTop = uls.offsetTop;
    var clientX = '';
    var clientY = '';
    var n = 0;
    function dragstart_handler(ev) {
            ev.target.setAttribute('id', 'test1')
            ev.dataTransfer.setData("text/plain", ev.target.id);


    }

    function dragover_handler(ev) {
        // 获取需要排除的元素
        /* var elemCancel = $(ev.target).closest("img");
         // 如果拖拽的是排除元素，函数返回
         if (elemCancel.length) {
             return true;
         }*/
        ev.preventDefault();
        clientX = ev.clientX;
        clientY = ev.clientY;

        n = Math.round((clientY - offsetTop)/40)        //52代指拖拽元素的高度
    }

    function drop_handler(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        var nodes = document.getElementById(data);
            uls.insertBefore(nodes, children(uls)[n]);
            nodes.removeAttribute('id');

            ev.dataTransfer.clearData();


    }
    //元素拖动中
    function dragging(ev) {
        console.log("拖动中")

    }
    function children(node){
        var tmp = node.childNodes;
        var arr = [];
        tmp.forEach(function(item){
            if(item.nodeType == 1){
                arr.push(item);
            }
        });
        console.log(arr)
        return arr;
    }
</script>
</html>

ps 上面那种方式在单独的页面没有问题，如果在他ul元素上面有东西的话，会出现位置不对的问题(未解决)

使用jquery-sortable

完美解决

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sortable jQuery</title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery-sortable.js"></script>
<style>
	body.dragging, body.dragging * {
	  cursor: move !important;
	}
	.dragged {
	  position: absolute;
	  opacity: 0.5;
	  z-index: 2000;
	}
	ol.example li.placeholder {
	  position: relative;
	  /** More li styles **/
	}
	ol.example li.placeholder:before {
	  position: absolute;
	  /** Define arrowhead **/
	}
</style>
</head>

<body>
<h3>点击下方拖拽排序</h3><h3>点击下方拖拽排序</h3><h3>点击下方拖拽排序</h3><h3>点击下方拖拽排序</h3><h3>点击下方拖拽排序</h3>
<h3>点击下方拖拽排序</h3>
<ol class='example'>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>strongly</li>
  <li>three</li>
  <li>three</li>
</ol>
<script>
	$(function  () {
	  $("ol.example").sortable()
	})
</script>
</body>
</html>

在这里插入图片描述