javascript_javascript スキルを使用した単純なマウスドラッグ効果の例-jsチュートリアル-php.cn

javascript_javascript スキルを使用した単純なマウスドラッグ効果の例

WBOY

リリース： 2016-05-16 16:05:03

オリジナル

1199 人が閲覧しました

この記事の例では、JavaScript を使用して単純なマウスドラッグ効果を実装する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

マウスを使用して要素をドラッグし、Web ページ上の任意の場所に配置することは非常に一般的です。たとえば、多くのブログテンプレートセクションは、単独で対応する位置にドラッグできます。

マウスドラッグの効果を実現できる簡単なものを書いてみましょう。

マウスが押されたとき、マウスの現在位置と要素の左の距離との差を記録します。
マウスが移動すると、要素の位置に値が割り当てられます。これは、マウスの位置から先ほどの差を引いたものです。
マウスが放されたとき、マウスの動きとマウスの放しに null を割り当てて、それ以上のアクションが実行されないようにします。

ポイント 1:

disx = oevent.clientX - box.offsetLeft;

ログイン後にコピー

ドラッグ時の要素上のマウスポイントの位置を決定するには、マウスの位置から要素の左の距離を引いた値が求められます。

ポイント 2:

box.style.left = oevent.clientX - disx + "px";

ログイン後にコピー

ドラッグ時の要素の位置、マウスの現在位置から前に計算したばかりの値を引いたもの。

さて、コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0; height:1500px;}
#box{width:100px; height:100px; background:#06c; position:absolute;}
</style>
<script>
window.onload = function(){
 var box = document.getElementById("box");
 var disx =0;
 var disy = 0;
 box.onmousedown = function(evt){
 var oevent = evt || window.event;
 disx = oevent.clientX - box.offsetLeft;
 disy = oevent.clientY - box.offsetTop;
 document.onmousemove = function(evt){
  var oevent = evt || window.event;
  box.style.left = oevent.clientX - disx + "px";
  box.style.top = oevent.clientY - disy + "px";
 }
 document.onmouseup = function(){
  document.onmousemove = null;
  document.onmouseup = null;
 }
 return false;
 }
}
</script>
</head>
<body>
<h1>鼠标拖动</h1>
<div id="box"></div>
</body>
</html>

ログイン後にコピー

再度改善したいのですが、上記のマウスドラッグ範囲に制限がなく、ドラッグ中のウィンドウが外に見えなくなることがあります。範囲を制限しましょう

ポイント 1: 以下のように、要素の左位置が 0 より小さい場合は、値 0 を割り当てます。それがビジュアルウィンドウのサイズから要素自体の幅を引いたものより大きい場合は、それに値を割り当てます。ビジュアルウィンドウのサイズから要素自体の幅を引いた差。

var boxl = oevent.clientX - disx;
if(boxl < 0){
  boxl =0;
  }else if(boxl > vieww - box.offsetWidth){
  boxl = vieww - box.offsetWidth;
  }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0;}
#box{width:100px;
height:100px;
background:#06c;
position:absolute;
}
</style>
<script>
window.onload = function(){
 var box = document.getElementById("box");
 var disx =0;
 var disy = 0;
 box.onmousedown = function(evt){
 var oevent = evt || window.event;
 disx = oevent.clientX - box.offsetLeft;
 disy = oevent.clientY - box.offsetTop;
 document.onmousemove = function(evt){
  var oevent = evt || window.event;
  var boxl = oevent.clientX - disx;
  var boxt = oevent.clientY - disy
  var vieww = document.documentElement.clientWidth || document.body.clientWidth;
  var viewh = document.documentElement.clientHeight || document.body.clientHeight;
  if(boxl < 0){
  boxl =0;
  }else if(boxl > vieww - box.offsetWidth){
  boxl = vieww - box.offsetWidth;
  }
  if(boxt < 0){
  boxt =0;
  }else if(boxt > viewh - box.offsetHeight){
  boxt = viewh- box.offsetHeight;
  }
  box.style.left = boxl + "px";
  box.style.top = boxt + "px";
 }
 document.onmouseup = function(){
  document.onmousemove = null;
  document.onmouseup = null;
 }
 return false;
 }
}
</script>
</head>
<body>
<h1>鼠标拖动</h1>
<div id="box"></div>
</body>
</html>

ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。