HTML4 + JavaScript - 拖放掉线问题

本文介绍了HTML4 + JavaScript - 拖放掉线问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

的嗨！我正在使用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!

推荐答案

<!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>

这篇关于HTML4 + JavaScript - 拖放掉线问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

MouseMove