那么多拖放的，居然没有一款适合小弟我
日期：2014-05-16 浏览次数：20401 次
那么多拖放的，居然没有一款适合我
我想通过js实现以下效果：
有三个input框: x, y,z
有一个label: test.
拖动test到x, 则x.value=test
拖动test到y, 则y.value=test
拖动test到z, 则z.value=test
也就是说拖到哪个input框上，哪个input框的value就是所拖动的label.
网上找了那么多，发现都是层拖动的，没有这种拖动赋值的，哪位高手能给个例子，在下不胜感激！！
------解决方案--------------------
做了个例子，不太完善，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>
我想通过js实现以下效果：
有三个input框: x, y,z
有一个label: test.
拖动test到x, 则x.value=test
拖动test到y, 则y.value=test
拖动test到z, 则z.value=test
也就是说拖到哪个input框上，哪个input框的value就是所拖动的label.
网上找了那么多，发现都是层拖动的，没有这种拖动赋值的，哪位高手能给个例子，在下不胜感激！！
------解决方案--------------------
做了个例子，不太完善，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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
