javascript - 如何实现列表中每一个元素的拖动？

Question

请看下述代码，我现在实现了第三个标签（.line）跟随鼠标移动。我想对每一个标签（.line）都实现鼠标拖动随鼠标移动，鼠标松开返回原处。
该如何去做？能否指明一下方向？谢谢

<style>    
    .out{width: 508px;background: pink;overflow:hidden;position: absolute;}
    .line{width: 500px;height: 100px;background: green;border:4px solid orange;margin:10px 0;position: relative;}
</style>


    <p id="out"  class="out">    
        <p class="line"></p>
        <p class="line"></p>
        <p class="line"></p>
        <p class="line"></p>
        <p class="line"></p>
    </p>
    
<script>
    //dom获取id方法
    function $(element){return document.getElementById(element);}
    //dom获取class方法
    function cl(element){return document.getElementsByClassName(element);}

    function move(){
        cl("line")[2].style.position = "absolute";
        cl("line")[2].style.zIndex = 1;
        cl("line")[2].style.top = event.clientY - 15 + "px";
    }

    function md(){        
        $("out").addEventListener("mousemove",move)
    }

    function cancelmd(){        
        $("out").removeEventListener("mousemove",move)
    }

    cl("line")[2].addEventListener("mousedown",md)

    cl("line")[2].addEventListener("mouseup",cancelmd)

</script>

Answer 1

跟着你的思路写啊，可能理解有误差

$("out").addEventListener("mousedown",down)
function down(ev){
    e = ev||event
    //在.line之间点到了父元素out则不执行
    //比如样式里有缝隙，没点到line什么的
    if(event.target==$("out")){
    return
    }else{
    //点的是.line执行，且保存一下这个.line。在mousemove里用
    var target = event.target;
    $("out").addEventListener("mousemove",function(){
       //改样式啥的,target是你最开始点击鼠标的那个.line
       target.XXX=XXX
    })
    }
}
//为啥加给document，你试试就知道了
document.addEventListener("mouseup",function(){
//把out的mousemove事件解除绑定
})

大概是这么个过程。没测试，思路应该是正确。
//