私はそれを落としたときに私のボーダーを黒に戻すにはどうすればできますか？それが画面を離れないようにするにはどうしたらいいですか？

-1

今、私の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>

出典

2017-11-03 Uni Student

多分codepenや人々が持つ周りの混乱ができることをjsfiddleが含まれます。それははるかに簡単に/迅速に答えを提供するようになります;） – Anthony

：

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

画面限界：

I don't know.

出典

2017-11-03 02:05:56

いいえ、私は以前にそれを試してみましたが、残念ながら動作しません。 –

はこれにあなたの現在のコードを変更し

。

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

と

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"; 
};

出典

2017-11-03 02:16:13 superdev

ありがとう、本当に助かりました！私はそれをドラッグしてから黒に戻って、もはやそれをクリックしていないときに、国境を緑に変える方法を知っていますか？ –

こんにちは、私はちょうど私の答えを更新しました。 'borderColor'の代わりに' border-color'を使います。 – superdev

@UniStudent要素全体が常にビュー内に残っていることを確認するより正確な方法があります。 'getBoundingClientRect'メソッドを使って、レンダリングの上、右、下、左の位置を返すことができます。私はVlavの答えを編集しました。うまくいけば彼はそれを受け入れます。 – Anthony

私はそれを落としたときに私のボーダーを黒に戻すにはどうすればできますか？それが画面を離れないようにするにはどうしたらいいですか？

答えて

関連する問題