Javascript 当我'；我把它弄丢了，我如何确保它不会'；你不能离开屏幕吗？_Javascript_Html_Css

Javascript 当我'；我把它弄丢了，我如何确保它不会'；你不能离开屏幕吗？

javascript html css

Javascript 当我'；我把它弄丢了，我如何确保它不会'；你不能离开屏幕吗？,javascript,html,css,Javascript,Html,Css,现在，当我点击它时，我的div会移动，它会变成绿色，但当我不再拖动它时，我不知道如何使它变回黑色。另外，如何确保它不会离开屏幕 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="Q1.css"> <title>Q1</title> <script> window.onload = function(){ dra

现在，当我点击它时，我的div会移动，它会变成绿色，但当我不再拖动它时，我不知道如何使它变回黑色。另外，如何确保它不会离开屏幕

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Q1.css">
<title>Q1</title>

<script>
window.onload = function(){

draggable('rectangle');

};


var dragObj = null;

function draggable(id)
{
var obj = document.getElementById(id);
obj.style.position = "absolute";
obj.onmousedown = function(){
        dragObj = obj;
        obj.style.borderColor = "#00FF00";
}
}

document.onmouseup = function(e){
dragObj = null;
};

document.onmousemove = function(e){
var x = e.pageX;
var y = e.pageY;

if(dragObj == null)
    return;

dragObj.style.left = x +"px";
dragObj.style.top= y +"px";
};


</script>
</head>

<body>
<div id="rectangle"></div>
</body>
</html>


Q1
window.onload=函数（）{
可拖动（“矩形”）；
};
var dragObj=null；
函数可拖动（id）
{
var obj=document.getElementById（id）；
obj.style.position=“绝对”；
obj.onmousedown=函数（）{
dragObj=obj；
obj.style.borderColor=“#00FF00”；
}
}
document.onmouseup=函数（e）{
dragObj=null；
};
document.onmousemove=函数（e）{
var x=e.pageX；
var y=e.pageY；
if（dragObj==null）
返回；
dragObj.style.left=x+“px”；
dragObj.style.top=y+“px”；
};

到边框颜色：

obj.onmouseup = function(){
        dragObj = null;
        obj.style.borderColor = "#000";
}

到屏幕限制：

I don't know.

将当前代码更改为此

obj.onmousedown = function(){
    dragObj = obj;
    obj.style.border-color = "#000000";
}

及

document.onmousemove=函数（e）{
var x=e.pageX；
var y=e.pageY；
如果（x<0）x=0；
如果（x>window.innerWidth）x=window.innerWidth；
如果（y<0）y=0；
如果（y>window.innerHeight）y=window.innerHeight；
if（dragObj==null）
返回；
dragObj.style.left=x+“px”；
dragObj.style.top=y+“px”；
};

谢谢，这真的很有帮助！你知道如何让边框在我拖动它时变为绿色，然后在我不再点击它时变回黑色吗？嗨，我刚刚更新了我的答案。使用

border color

而不是

borderColor

@UniStudent有一种更精确的方法来确保整个元素始终保持在视图中。可以使用方法

getBoundingClientRect

返回元素顶部、右侧、底部和左侧的位置。我对弗拉夫的回答做了修改。希望他能接受。不，我之前试过，但不幸的是它不起作用。可能包括一个人们可以随意使用的代码笔或JSFIDLE。这样可以更容易/更快地为您提供答案；）

document.onmousemove = function(e){
    var x = e.pageX;
    var y = e.pageY;

    if (x < 0) x = 0;
    if (x > window.innerWidth) x = window.innerWidth;
    if (y < 0) y = 0;
    if (y > window.innerHeight) y = window.innerHeight;

    if(dragObj == null)
        return;

    dragObj.style.left = x +"px";
    dragObj.style.top= y +"px";
};