实现拖拽功能

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实现拖拽功能,比如把5个兄弟节点中的最后一个节点拖拽到节点1和节点2之间</title>
    <style type="text/css">
        #drag li {
            background: #f00;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin: 10px;
            display: inline-block;
            color: #fff;
        }
        #drag{
            margin: 0 auto;
            padding: 0;
            width: 380px;
            border: dashed 2px #ccc;
        }
    </style>
</head>
<body>
<ul id='drag'>
    <li draggable="true">1</li>
    <li draggable="true">2</li>
    <li draggable="true">3</li>
    <li draggable="true">4</li>
    <li draggable="true">5</li>
</ul>

<script type="text/javascript" src="bootstrap-3.3.7/js/jquery-3.2.1.js" ></script>
<script>
    var ele;
    document.querySelector('#drag').addEventListener('dragstart', function (e) {
    ele = e.target;
    ele.classList.add('draging');
    })
    document.querySelector('#drag').addEventListener('dragover', function (e) {
    e.preventDefault();

    if (e.target.nodeName === 'LI') {
      e.target.parentNode.insertBefore(ele, e.target);
    }
    })
    document.querySelector('#drag').addEventListener('drop', function (e) {
    ele.classList.remove('draging');
    })
</script>
</body>
</html>

演示地址:预览

已有 2 条评论
  1. 魔剑智尊

    能有个demo该多好…

    魔剑智尊 December 31st, 2017 at 04:47 pm回复
    1. admin

      好的

      admin January 3rd, 2018 at 10:30 am回复
发表新评论