JS対象向けプログラミング実現のドラッグ機能事例詳細

6652 ワード

JS 対象に向けるドラッグします

本論文の例は、JSのオブジェクト指向プログラミングのためのドラッグ機能について述べる。皆さんに参考にしてあげます。具体的には以下の通りです。
オリジナルのプロセスコード:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      #box {
        width: 100px; 
        height: 100px; 
        background: blue; 
        position: absolute;
      }
    </style>
    <title>  </title>
    <script>
      var oBox=null;
      var disX=0;
      var disY=0;
      
      window.onload=function(){
        oBox=document.getElementById('box');
        
        oBox.onmousedown=fnDown;
      };
      //      
      function fnDown(ev){
        var oEvent = ev||event;
        disX = oEvent.clientX - oBox.offsetLeft;
        disY = oEvent.clientY - oBox.offsetTop;
        
        document.onmousemove = fnMove;
        document.onmouseup = fnUp;
      }
      //      
      function fnMove(ev){
        var oEvent=ev||event;
        
        oBox.style.left = oEvent.clientX - disX + 'px';
        oBox.style.top = oEvent.clientY - disY + 'px';
      }
      //      
      function fnUp(){
        document.onmousemove = null;
        document.onmouseup = null;
      }
    </script>
  </head>
 
<body>
  <div id="box"></div>
</body>
</html>

以下は対象向けコードです。
ドラゴ.js


/**
 *   
 * @param {Object} id div id
 */
function Drag(id){
  this.oBox = document.getElementById(id);
  this.disX = 0;
  this.disY = 0;
  
  var _this = this;
  
  this.oBox.onmousedown = function(){
    _this.fnDown();
  }
}
//    
Drag.prototype.fnDown = function(ev){
  var oEvent = ev || event;
  
  this.disX = oEvent.clientX - this.oBox.offsetLeft;
  this.disY = oEvent.clientY - this.oBox.offsetTop;
  
  var _this = this;
  
  document.onmousemove = function(){
    _this.fnMove();
  };
  document.onmouseup = function(){
    _this.fnUp();
  };
}
//    
Drag.prototype.fnMove = function(ev){
  var oEvent= ev || event;
  
  this.oBox.style.left = oEvent.clientX - this.disX + 'px';
  this.oBox.style.top = oEvent.clientY - this.disY + 'px';
}
//    
Drag.prototype.fnUp = function(){
  document.onmousemove = null;
  document.onmouseup = null;
}

ドラゴ.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      div {
        position: absolute;
      }
    </style>
    <title>  </title>
    <script type="text/javascript" src="../js/drag.js" ></script>
    <script>
      window.onload = function(){
        var drag1 = new Drag("box1");
        
        var drag1 = new Drag("box2");
      };
    </script>
  </head>
 
<body>
  <div id="box1" style="background: red;width: 200px;height: 200px;"></div>  
  <div id="box2" style="background: blue;width: 100px;height: 100px;"></div>
</body>
</html>

このドラッグには、境界を引っ張り出すコントロールがないという問題があります。しかし、コードを修正したくないです。どうすればいいですか？javaを学んだことがありますが、サブクラスを書いて、もっと具体的な操作ができると知っています。また、親の機能を残しています。継承です。
html


<script type="text/javascript" src="../js/drag.js" ></script>
<script type="text/javascript" src="../js/dragLimit.js" ></script>
<script>
  window.onload = function(){
     var drag1 = new Drag("box1");       
     var drag1 = new DragLimit("box2");//          
  };
</script>
<body>
  <div id="box1" style="background: red;width: 200px;height: 200px;"></div>  
  <div id="box2" style="background: blue;width: 100px;height: 300px;"></div>
</body>

DragLimit.js：DragLimitがDragから引き継ぎ、境界外に出られないようにコントロールしました。


/**
 *        ，   Drag
 * @param {Object} id
 */
function DragLimit(id){
  Drag.call(this, id);
}
//    
for(var p in Drag.prototype){
  DragLimit.prototype[p] = Drag.prototype[p];
}
/**
 *            ，        
 */
DragLimit.prototype.fnMove = function(ev){
  var oEvent= ev || event;
  
  var left = oEvent.clientX - this.disX;
  var top = oEvent.clientY - this.disY;
  
  //    
  if(left < 0){
    left = 0;
  } else if(left > document.documentElement.clientWidth-this.oBox.offsetWidth){
    left = document.documentElement.clientWidth-this.oBox.offsetWidth;
  }
  if(top <= 0){
    top = 0;
  } else if(top > document.documentElement.clientHeight-this.oBox.offsetHeight){
    top = document.documentElement.clientHeight-this.oBox.offsetHeight;
  }
  
  this.oBox.style.left = left + 'px';
  this.oBox.style.top = top + 'px';
}

関心のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRunは上記のコードの運行効果をテストします。
JavaScriptに関する詳細な内容について興味がある読者は、このサイトのテーマを見ることができます。「javascript対象向け入門教程」「JavaScriptエラーとデバッグテクニックのまとめ」「JavaScriptデータ構造とアルゴリズム技術のまとめ」「JavaScriptはアルゴリズムと技術の総括を遍歴します。」「JavaScript数学演算の使い方のまとめ」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。

iOSはNSMuttible AttributedStringを利用してリッチテキストを実現する方法でまとめています。

scrollwidth、clientWidthとoffset Widthの違い