HTML4 + JavaScript - 拖放掉线问题 [英] HTML4 + JavaScript - drag & drop problem
问题描述
的嗨！我正在使用javascript中的拖放代码。由于我使用的是html4，我不能只为div设置一个draggable属性，因此我使用mousedown和mousemove进行拖放功能的拖放和鼠标移动。但是，有些不对劲。我认为这是mousedown事件处理程序，因为我尝试输出事件的坐标失败。我仍然无法弄清楚确切的问题，所以如果比我更先进的人给我一个肩膀，我将不胜感激。这是我的代码到现在为止：
Hi! I'm working on a drag&drop code in javascript. Since I'm using html4, I can't just set a "draggable" attribute to the div, so I use mousedown and mousemove for the drag and mouseup for the drop functionality. However, something's wrong. I think it's the mousedown event handler, because I tried unsuccessfully to output the event's coordinates. I still can't figure out the exact problem, so I'd be grateful if someone more advanced than me gives a shoulder. Here's my code till now:
<!DOCTYPE html>
<html>
<script type = "txt/javascript">
var oldX;
var oldy;
var newX;
var newY;
var x;
var y;
var pressed;
pressed = 0;
function press(event){
if(event.currentTarget.id == 'wnd'){
pressed = 1;
oldX = event.clientX;
oldY = event.clientY;
}
}
function release(event){
pressed = 0;
}
function move(event){
if(pressed)
newX=event.clientX;
newY=event.clientY;
x = parseInt((document.getElementById('wnd').style.left).split('p'));
y = parseInt((document.getElementById('wnd').style.top).split('p'));
document.getElementById('wnd').style.left = x[0] + newX - oldX + "px";
document.getElementById('wnd').style.top = y[0] + newY - oldY + "px";
oldX = newX;
oldY = newy;
}
}
document.addEventListener("mouseDown",press(event));
document.addEventListener("mouseUp",release(event));
document.addEventListener("mouseMove",move(event));
</script>
<body >
<div id="wnd" style="position:absolute;background-color:green;top:10px;left:10px;width:200px;height:150px;">
<div style="position:relative;background-color:white;left:5px;top:25px;width:190px;height:120px;">
Try to drag this window?</div>
</div>
</body>
</html>
谢谢！
Thanks!
推荐答案
对你的一些改变，你很高兴..
Hi,
Some changes to your and you are good to go..
<!DOCTYPE html>
<html>
<head>
<script>
var oldX;
var oldy;
var newX;
var newY;
var x;
var y;
var pressed;
pressed = 0;
function press(event){
if(event.srcElement.id == 'wnd'){
pressed = 1;
oldX = event.clientX;
oldY = event.clientY;
}
}
function release(event){
pressed = 0;
}
function move(event){
if(pressed)
{
newX=event.clientX;
newY=event.clientY;
x = parseInt((document.getElementById('wnd').style.left));
y = parseInt((document.getElementById('wnd').style.top));
document.getElementById('wnd').style.left = x + newX - oldX + "px";
document.getElementById('wnd').style.top = y + newY - oldY + "px";
oldX = newX;
oldY = newY;
}
}
function onLoad(){
document.addEventListener("mousedown",press);
document.addEventListener("mouseup",release);
document.addEventListener("mousemove",move);
}
</script>
</head>
<body onload = "onLoad();">
<div id="wnd" style="position:absolute;background-color:green;top:10px;left:10px;width:200px;height:150px;">
<div style="position:relative;background-color:white;left:5px;top:25px;width:190px;height:120px;">
Try to drag this window?</div>
</div>
</body>
</html>
为什么你没有使用插件？查看 http://www.dropzonejs.com/ [ ^ ]
祝你好运
-Amit
Hi,
Why you are not using plugin for that ? Check http://www.dropzonejs.com/[^]
Best luck
-Amit
这篇关于HTML4 + JavaScript - 拖放掉线问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
