自己写的一个小页面，直接放代码。
<!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.