<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{overflow: hidden;width: 628px;height: 302px;}
#box_left,#box_right{width: 300px;height: 300px;border: 1px solid #000;float: left;}
#move{float: left;text-align: center;margin-top: 20%;}
span{cursor: pointer;display: block;}
span:hover{color: crimson;}
#box_left p,#box_right p{cursor: pointer;}
#box_left p:hover,#box_right p:hover{color: crimson;}
</style>
<script type="text/javascript">
window.onload=function(){
var box_left=document.getElementById('box_left');
var box_right=document.getElementById('box_right');
var box_left_aP=box_left.getElementsByTagName('p');
var box_right_aP=box_left.getElementsByTagName('p');
for(var i=0;i<box_left_aP.length;i++){
box_left_aP[i].id=i;
box_left_aP[i].ondragstart=function(){
start(event);
};
stop_select(box_left_aP[i]);
}
for(var i=0;i<box_right_aP.length;i++){
box_right_aP[i].ondragstart=function(){
start(event);
};
stop_select(box_right_aP[i]);
}
box_right.ondragover=function(){
over(event);
};
box_right.ondrop=function(){
stop(event);
};
box_left.ondragover=function(){
over(event);
};
box_left.ondrop=function(){
stop(event);
};
function start(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function over(ev){
ev.preventDefault();
}
function stop(ev){
ev.preventDefault();
var id=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(id));
}
function stop_select(element){
if (typeof(element.onselectstart) != "undefined") {
// IE下禁止元素被选取
element.onselectstart = new Function("return false");
} else {
// firefox下禁止元素被选取的变通办法
element.onmousedown = new Function("return false");
element.onmouseup = new Function("return true");
}
}
};
</script>
</head>
<body>
<div id="box">
<div id="box_left">
<p draggable="true">21454545454515215152145145</p>
<p draggable="true">asdasdas</p>
<p draggable="true">wqeqrqr</p>
<p draggable="true">sdfgsgsdg</p>
<p draggable="true">trurjrjr</p>
</div>
<p id="move">
<span id="one">></span>
<span id="our">>></span>
</p>
<div id="box_right">
</div>
</div>
</body>
</html>
478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
