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

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

<!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.

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值