JavaScript实现多个div块之间相互拖放，交换位置(内容)

最新推荐文章于 2024-08-20 15:21:55 发布

faker5

最新推荐文章于 2024-08-20 15:21:55 发布

阅读量9.3k

点赞数

分类专栏： Java篇文章标签： javascript div可拖动拖动交换位置

本文链接：https://blog.csdn.net/wfr18314536093/article/details/52469279

版权

Java篇专栏收录该内容

12 篇文章 0 订阅

订阅专栏

自己写的一个小页面，直接放代码。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>数据源配置：配置</title>
<link href="style/base.css" rel="stylesheet" type="text/css" />
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    #titleDiv{
        width: 800px;
        margin: auto;
        text-align: center;
        height: 50px;
        margin-top: 50px;
    }
    #submit{
        width: 800px;
        height: 50px;
        background-color: blue;
        margin:auto;
        text-align: center;
    }
    #content{
        width: 800px;
        height: 200px;
        background-color: blue;
        margin:auto;
    }
    #priority{
        width:200px;
        background-color: burlywood;
        height:200px;
        float: left;
    }
    #priorityTitle,#dataSourceTitle,#forbiddenYNTitle{
        width:200px;
        height: 20px;
        margin: auto;
        margin-top: 50px;
        text-align: center;
    }
    #priorityOne,#priorityTwo,#priorityThree,#forbiddenYN1,#forbiddenYN2,#forbiddenYN3{
        width:200px;
        height:20px;
        margin: auto;
        margin-top: 10px;
        text-align: center;
    }
    #dataSourceOne,#dataSourceTwo,#dataSourceThree{
        width:400px;
        height:20px;
        margin: auto;
        margin-top: 10px;
        text-align: center;
    }
    #dataSource{
        width:400px;
        height:200px;
        background-color: burlywood;
        float: left;
    }
    #forbiddenYN{
        width:200px;
        height:200px;
        background-color: burlywood;
        float: left;
    }
    #submitInput{
       width: 60px;
        height: 30px;
        margin-top: 10px;
        cursor: pointer;
        background-color: red;
    }
</style>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript">
    function allowDrop(ev)
    {
        ev.preventDefault();
    }
    var srcdiv = null;
    function drag(ev,divdom)
    {
        srcdiv=divdom;
        ev.dataTransfer.setData("text/html",divdom.innerHTML);
    }
    function drop(ev,divdom)
    {
        ev.preventDefault();
        if(srcdiv != divdom){
            srcdiv.innerHTML = divdom.innerHTML;
            divdom.innerHTML=ev.dataTransfer.getData("text/html");
        }
    }
</script>
<script>
    $(function() {
        $('#submitInput').click(function() {
            //发送参数
            var priorityOne = $("#priorityOne").html();
            var priorityTwo = $("#priorityTwo").html();

            var dataSourceOne = $("#dataSourceOne").html();
            var dataSourceTwo = $("#dataSourceTwo").html();

            var forbiddenYN1 = $("#checkboxOne").attr("checked");//通过标签的属性获取属性值，从而获取checkbox是否被选中事件，true为选中，flase代表未选中
            var forbiddenYN2 = $("#checkboxTwo").attr("checked");
            window.location.href="/TVListTwo/channelList1.jsp?dataSourceOne="+dataSourceOne+"&dataSourceTwo="+dataSourceTwo+"&forbiddenYN1="+forbiddenYN1+"&forbiddenYN2="+forbiddenYN2; 
        })
    })
</script>
</head>
<body>
    <div id="titleDiv"><h3>数据源配置</h3></div>
    <div id="content">
        <div id="priority">
            <div id="priorityTitle">优先级(1为最高优先级)</div>
            <div id="priorityOne">1</div>
            <div id="priorityTwo">2</div>
        </div>
        <div id="dataSource">
            <div id="dataSourceTitle">数据源(拖动位置可调整优先级)</div>
            <div id="dataSourceOne" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">TVSou</div>
            <div id="dataSourceTwo" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">KanKanTV</div>
        </div>
        <div id="forbiddenYN">
            <div id="forbiddenYNTitle">是否禁用(勾选代表禁用)</div>
            <div id="forbiddenYN1"><input type="checkbox" name="checkboxOne" value="yes1" id="checkboxOne" /></div>
            <div id="forbiddenYN2"><input type="checkbox" name="checkboxTwo" value="yes2" id="checkboxTwo" /></div>
        </div>
    </div>
    <div id="submit">
        <input type="button" value="提交" id="submitInput">
    </div>
</body>
</html>

上面的代码copy运行，中间的数据源div是可以通过拖动来交换位置的，也就实现了数据源优先级间的互换。
函数说明：
ondrop: 拖到目的地放下之后要做的处理，这里自定义drop(event,this)函数,互换两个的innerHTML
ondragover:当拖动链接等有默认事件的元素时，要在ondragover事件中用ev.preventDefault()阻止默认事件。否则drop事件不会触发。
draggable:允许拖动
ondragstart:选取拖动目标要做的处理，这里保存拖动目标的innerHTML.