javascript簡単なマウスドラッグ効果の例を実現します.

3456 ワード

この実例はJavascriptが簡単なマウスドラッグ効果を実現することを述べている.皆さんの参考にしてください.具体的な分析は以下の通りです.
マウスで要素をドラッグして、ページの任意の位置に置くのはよく見られます.例えば、多くのブログテンプレートのブロックの位置は自分でドラッグして該当の場所に移動できます.
まず簡単に書いて、マウスをドラッグする効果があります.
マウスを押すと、マウスの現在位置と要素の左の距離の差を記録します.マウスが動くと、元素の位置に値を付けます.マウスの位置です.先ほどの差を引いてください.マウスを離す時、マウスの移動とマウスの移動にnullを放して、それらに更にいかなる動作がないようにします.
ポイント1:


disx = oevent.clientX - box.offsetLeft;

ドラッグを決定するには、要素の位置にマウスポイントがあります.マウスの位置から要素の左側の距離を減算します.
ポイント2:

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

ドラッグしたときの要素の位置から、マウスの現在の位置から、先ほど計算した値が減算されます.
はい、コードを付けます.

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

上のマウスをドラッグしても制限範囲がなく、ウィンドウの外をドラッグして見えなくなることがあります.以下は範囲を制限します.
ポイント1:要素の左の位置が0より小さい場合は、0を割り当てます.ウィンドウサイズから要素の幅を差し引いた場合は、ウィンドウサイズから要素の幅の差を与えます.


var boxl = oevent.clientX - disx;
if(boxl < 0){
  boxl =0;
  }else if(boxl > vieww - box.offsetWidth){
  boxl = vieww - box.offsetWidth;
  }




     


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;
 }
}

本論文で述べたように、皆さんのjavascriptプログラムの設計に役に立ちます.

js再帰