js面板拖放排序初尝试

最新推荐文章于 2024-09-11 17:31:31 发布

巽悟空

最新推荐文章于 2024-09-11 17:31:31 发布

阅读量109

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_41865400/article/details/102614899

版权

Javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这是一个按照自己思路实现的面板拖放排序，当然部分代码“复制”于网上教程。笔者非专业人员，原生JS基础比较差。现在时不时的往回补基础。

基本思路

面板拖放排序，其实是要在面板的上下位置上，存在两个接收容器，然后面板拖放到这些容器中释放鼠标后，将面板使用appendChild()移动到容器中。
——扩展思路：
1.是面板拖放到这些容器中释放鼠标后，直接用面板取代这个DIV；
2.面板上下的容器并不是“先天”存在，而是通过脚本动态生成。Drag结束后再去除。
3.容器的dragOver()可以让拖放经过容器时产生更复杂的效果，比如更改大小、颜色等。

在这里插入图片描述
这个案例，只是初步实现了面板drap到某个容器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .pnl{
            width:400px; height:240px;
            border:1px solid #ccc;
            position: relative;
            background: #fff;
        }
        .title{
            text-align: center;
            background: #ccc;
        }
        .drop{
            min-height: 2px; width: 100%;
            background:orange;
            bottom: -10px;
            margin: 10px 0px;
        }
    </style>
</head>
<body>
    <div class="drop" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
    <div class="drop" ondragover="allowDrop(event)" ondrop="drop(event)">
        <div class="pnl" draggable="true" ondragstart="dragStart(event)" ondrag="" id="pnl2">
            <div class="title">标题</div>
        </div>
    </div>
    <div class="drop" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
    <div class="drop" ondragover="allowDrop(event)" ondrop="drop(event)">
        <div class="pnl" draggable="true" ondragstart="dragStart(event)" ondrag="" id="pnl1">
            <div class="title">标题</div>
        </div>
    </div>
    <div class="drop" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
    <div class="drop" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
    
    <div class="drop" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
    <p id="comit"></p>
</body>
<script>
function dragStart(event){
    event.dataTransfer.setData("sid",event.target.id);
    document.getElementById("comit").innerText="drag:" + event.target.id;
}
function drop(event){
   
    var sID = event.dataTransfer.getData("sid");
    event.target.appendChild(document.getElementById(sID));
    document.getElementById("comit").innerText="drop:" + sID;
}
function allowDrop(event){
    event.preventDefault();
}
</script>
</html>