javascript 拖拽问题

黄金小瓜 发布于 2016/09/27 16:08
阅读 156
收藏 0

现在做一个js的拖拽:图一,四个信息栏内放了可选字段,图二,可以拖拽到已选字段栏,已选栏也可以拖出字段。但问题是目前四个信息栏内的字段可以互拖,想要是只能拖往已选栏(此可以做到),在把字段从已选栏拖出去时如何做到只能拖回原来的栏呢?本人没搞过js,求帮助。

图一:

图二:


代码:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#source_box1,#source_box2,#source_box3,#source_box4, #target_box
{float:left; width:900px; height:100px; margin:5px;padding:10px;border:1px solid #aaaaaa;border-radius:5px; float:left;height:auto !important;/*假定最低高度是200px*/min-height:30px; }
.button{
	text-align:center;
    color: #555;
	padding-top:5px;
	padding-bottom: 6px;
	padding-left:13px;
	padding-right:13px;
	display:inline-block;
	margin-left:4px;
	margin-top:3px;
	margin-bottom:3px;
	text-align:left;
	border-radius:4px;
	background-repeat:no-repeat;
	font-family:Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serif; 
	font-size:12px;text-decoration: none;
}

.button-style{
    background-color: #F1F5F6;
    border-width: 1px;
    border-color: #C9CED5;
    border-style: solid;}
.button-style:active{	 background-color:#C6CAD3;	}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
	ev.preventDefault();
}
function drag(ev)
{
	ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
	ev.preventDefault();
	var data=ev.dataTransfer.getData("Text");    
    
	if (ev.target.id != "source_box1" && ev.target.id != "source_box2" && ev.target.id != "source_box3" && ev.target.id != "source_box4" && ev.target.id != "target_box") {    
        ev.target.parentNode.insertBefore(document.getElementById(data), document.getElementById(ev.target.id)); 
    }else{
		ev.target.appendChild(document.getElementById(data)); 
	}
	if(document.getElementById("SELECTED")){
	   document.getElementById("SELECTED").value = selectionList();
	}
	if(document.getElementById("UNSELECTED")){
		document.getElementById("UNSELECTED").value = unSelectionList();
	}
}
function selectionList(){
	var childs = document.getElementById("target_box").getElementsByTagName('div');
	var select_list = "####";
	for(var i=0;i<childs.length;i++){
		select_list += ","+childs[i].id;
	}
	return select_list.replace("####,","");
}

function unSelectionList(){
	var childs = document.getElementById("source_box").getElementsByTagName('div');
	var select_list = "####";
	for(var i=0;i<childs.length;i++){
		select_list += ","+childs[i].id;
	}
	return select_list.replace("####,","");
}

if(document.getElementById("SELECTED")){
	document.getElementById("SELECTED").style.display = "none";
}
if(document.getElementById("UNSELECTED")){
	document.getElementById("UNSELECTED").style.display = "none";
}
</script>
</head>
<body>
	<span style="float:left; color:#AB5B1A;font-family:Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serif;  font-size:12px;font-weight:bold; ">&nbsp;员工基本信息</span>
	<div id="source_box1" ondrop="drop(event)" ondragover="allowDrop(event)">
		<div class="button button-style" style="cursor:pointer;" draggable="true" ondragstart="drag(event)" id="%bind(:1)">%bind(:2)</div>
	</div>
    <span style="float:left; color:#AB5B1A;font-family:Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serif;  font-size:12px;font-weight:bold; ">&nbsp;员工工作信息</span>
	<div id="source_box2" ondrop="drop(event)" ondragover="allowDrop(event)">
		<div class="button button-style" style="cursor:pointer;" draggable="true" ondragstart="drag(event)" id="%bind(:1)">%bind(:2)</div>
	</div>
    <span style="float:left; color:#AB5B1A;font-family:Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serif;  font-size:12px;font-weight:bold; ">&nbsp;合同信息</span>
	<div id="source_box3" ondrop="drop(event)" ondragover="allowDrop(event)">
		<div class="button button-style" style="cursor:pointer;" draggable="true" ondragstart="drag(event)" id="%bind(:1)">%bind(:2)</div>
	</div>
    <span style="float:left; color:#AB5B1A;font-family:Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serif;  font-size:12px;font-weight:bold; ">&nbsp;最高学历信息</span>
	<div id="source_box4" ondrop="drop(event)" ondragover="allowDrop(event)">
		<div class="button button-style" style="cursor:pointer;" draggable="true" ondragstart="drag(event)" id="%bind(:1)">%bind(:2)</div>
	</div>
	<span style="float:left; color:#AB5B1A;font-family:Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serif;  font-size:12px;font-weight:bold; ">&nbsp;已选字段</span>
	<div id="target_box" ondrop="drop(event)" ondragover="allowDrop(event)">
		<div class="button button-style" style="cursor:pointer;" draggable="true" ondragstart="drag(event)" id="%bind(:1)">%bind(:2)</div>
	</div>
</body>
</html>




加载中
返回顶部
顶部