To: lihui_shine(浪尖赏花),这是我需要的: 鼠标按住label拖动,label的位置要一起变,在input内释放鼠标触发事件. 能帮个忙吗?非常感谢!
做了个例子,不太完善,lz自己改改吧(IE测试通过)<html> <head> <title>a</title> <script> var canMove=false; var oldX,oldY; function mouse_down(){ canMove=true; oldX=event.x; oldY=event.y; } function mouse_up(){ canMove=false; } function mouse_move(){ if(canMove){ var curX=event.x; var curY=event.y; var obj=document.getElementById("lb1"); var objLeft=obj.style.left; var objTop=obj.style.top; var left=parseInt(objLeft.substring(0,objLeft.length-2))+parseInt(curX-oldX); obj.style.left=left; var top=parseInt(objTop.substring(0,objTop.length-2))+parseInt(curY-oldY); obj.style.top=top; oldX=curX; oldY=curY; isDragSuccess(obj,left,top); } } function isDragSuccess(label,left,top){ var inputObjs=document.getElementsByName("txt1"); for(var i=0;i<inputObjs.length;i++){ var obj=inputObjs[i]; var input_left=obj.style.pixelLeft; var input_top=obj.style.pixelTop; var input_width=obj.style.pixelWidth; var input_height=obj.style.pixelHeight; if(left>input_left&&left<input_left+input_width&&top>input_top&&top<input_top+input_height){ obj.value=label.innerText; return; }else{ obj.value=""; } } } </script> </head> <body> <input name=txt1 style="position:absolute;left:10px;top:10px;width:80px;height:20px" type=text value=""> <input name=txt1 style="position:absolute;left:10px;top:50px;width:80px;height:20px" type=text value=""> <input name=txt1 style="position:absolute;left:10px;top:90px;width:80px;height:20px" type=text value=""> <label id=lb1 style="position:absolute;left:100px;top:100px;background-color:#cccccc" onmousedown=mouse_down() onmouseup=mouse_up() onmousemove=mouse_move()>test</label> </body></html>
鼠标按住label拖动,label的位置要一起变,在input内释放鼠标触发事件.
能帮个忙吗?非常感谢!
<head>
<title>a</title>
<script>
var canMove=false;
var oldX,oldY;
function mouse_down(){
canMove=true;
oldX=event.x;
oldY=event.y;
}
function mouse_up(){
canMove=false;
}
function mouse_move(){
if(canMove){
var curX=event.x;
var curY=event.y;
var obj=document.getElementById("lb1");
var objLeft=obj.style.left;
var objTop=obj.style.top;
var left=parseInt(objLeft.substring(0,objLeft.length-2))+parseInt(curX-oldX);
obj.style.left=left;
var top=parseInt(objTop.substring(0,objTop.length-2))+parseInt(curY-oldY);
obj.style.top=top;
oldX=curX;
oldY=curY;
isDragSuccess(obj,left,top);
}
}
function isDragSuccess(label,left,top){
var inputObjs=document.getElementsByName("txt1");
for(var i=0;i<inputObjs.length;i++){
var obj=inputObjs[i];
var input_left=obj.style.pixelLeft;
var input_top=obj.style.pixelTop;
var input_width=obj.style.pixelWidth;
var input_height=obj.style.pixelHeight;
if(left>input_left&&left<input_left+input_width&&top>input_top&&top<input_top+input_height){
obj.value=label.innerText;
return;
}else{
obj.value="";
}
}
}
</script>
</head>
<body>
<input name=txt1 style="position:absolute;left:10px;top:10px;width:80px;height:20px" type=text value="">
<input name=txt1 style="position:absolute;left:10px;top:50px;width:80px;height:20px" type=text value="">
<input name=txt1 style="position:absolute;left:10px;top:90px;width:80px;height:20px" type=text value="">
<label id=lb1 style="position:absolute;left:100px;top:100px;background-color:#cccccc" onmousedown=mouse_down() onmouseup=mouse_up() onmousemove=mouse_move()>test</label>
</body></html>
参考:http://hi.baidu.com/zbzb/blog/item/570f7109fb5580af2fddd420.html