JavascriptでDOM要素をドラッグ可能にする_基礎知識-jsチュートリアル-php.cn

JavascriptでDOM要素をドラッグ可能にする_基礎知識

WBOY

リリース： 2016-05-16 15:10:07

オリジナル

1680 人が閲覧しました

概要:

最近、プロジェクトに画像プレビュー機能を構築したいと考えていますが、このとき、ビューインターフェイスを超える非常に大きな画像をアップロードするユーザーに遭遇します。最後に、幅と高さが固定された位置を作成し、ユーザーが画像をドラッグして表示できるようにすることにしました。そこで、ie5+、chrome、Firefox、opera などのブラウザー用のドラッグ可能な DOM 要素をサポートするプラグインを作成しました。

次のように、この関数の実装に必要な 知識ポイント はそれほど多くありません。

1. js の element.style.left

style.left によって返される変数は文字列および変数 variable です

js の

element.offsetLeft

offsetLeft は、int 型の不変変数を返します (つまり、この変数を変更してもレイアウトには影響しません)

2. js のevent.clientX

clientX イベントプロパティは、イベントがトリガーされたときにブラウザページ (またはクライアント領域) へのマウスポインターの水平座標を返します。

3. js の element.className

スタイルを変更するクラスのメソッド

上記の 3 点はいずれも比較的身近な知識です。私が言いたいのは次のようなことです。

4. js にオブジェクトのイベント監視を追加します

element.addEventListener("イベント","楽しい","ブール");

event: イベントを示します

楽しい: イベントがトリガーされた後に実行される関数を指します

プロジェクトアドレス:

https://github.com/baixuexiyang/drag

例:

var drag = new Drag("test", {
      onStart: function(){

      },
      onMove: function(){
        document.getElementById('position').innerHTML = '距离左边：' + drag.getPositions().left + '；距离顶部：' + drag.getPositions().top;
      },
      onStop: function(){

      }
    });

ログイン後にコピー

別の例で発生した問題を見てみましょう。私はこの問題に長い間取り組んできましたが、まだ良い解決策を見つけることができません。

例を見てみましょう: (テストの便宜上、コードをファイルに書きました)

ドラッグ.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title>鼠标拖拽</title> 
  <style type="text/css"> 
    <!-- 
    #dragdiv{ 
      background-color:#0A0909; 
      height:200px; 
      width:157px; 
     
      position:absolute; 
    } 
    .ondrag{ 
      filter:alpha(opacity=200); 
      cursor:move; 
    } 
    .enddrag{ 
      filter:alpha(opacity=100); 
      cursor:default; 
    } 
    #father{ 
      width:600px; 
      height:700px; 
      background:#C63535; 
    } 
    --> 
  </style> 
</head> 
<body> 
  <div id="father"> 
  <div id="dragdiv"></div> 
  </div> 
  <script language="JavaScript"> 
    var dragdiv=document.getElementById("dragdiv"); 
    var father=document.getElementById("father"); 
    var offsetx=0; 
    var offsety=0; 
    var draging=false; 
    function beforeDrag(ev){ 
       
        if (!draging) { 
          draging = true; 
          var l = dragdiv.offsetLeft; 
          var t = dragdiv.offsetTop; 
          offsetx = ev.clientX - l; 
          offsety = ev.clientY - t; 
           
        } 
        else { 
          dragdiv.className = "enddrag"; 
          dragdiv.removeEventListener("mousemove",onDrag); 
          draging = false; 
          return; 
        } 
       
    } 
    function endDrag(){ 
      draging=false; 
      dragdiv.className="enddrag"; 
    } 
    function onDrag(ev){ 
      if (!draging) { 
        dragdiv.className = "enddrag"; 
        return; 
      } 
      else { 
        dragdiv.className = "ondrag"; 
       
        dragdiv.style.left = (ev.clientX - offsetx) + "px"; 
        dragdiv.style.top = (ev.clientY - offsety) + "px"; 
         
      } 
    } 
      dragdiv.addEventListener("mousedown",beforeDrag,true); 
      dragdiv.addEventListener("mousemove",onDrag,false); 
      dragdiv.addEventListener("mouseup",endDrag,true); 
 
  </script> 
 
</body> 
 
</html>

ログイン後にコピー

コードは非常に簡単です。少し注意して読めば理解できます

最初のドラッグは成功しました。マウスを押したままドラッグするだけです。 2 回目は正常に動作しません。2 回目に正常に動作させたい場合は、マウスの他の場所 (つまり、ドラッグしない部分) をクリックする必要があります。

上記のマウスイベント

「mousedown」は、マウスが押されたときにこのイベントがトリガーされることを意味します (beforeDrag 関数は上記でトリガーされます)

「mousemove」は、マウスが移動するとこのイベントがトリガーされることを意味します (onDrag 関数は上記でトリガーされます)

「mouseup」は、マウスが押されてから離されたときにこのイベントがトリガーされることを意味します。 (endDrag 関数は上記でトリガーされます)

追記: オンラインで確認したマウス時間は「onmousedown」です。著者が「onmousedown」をテストしたところ、イベント応答はありませんでしたが、「mousedownm」は正常でした。

上記の問題について、addEventListener の順序の問題や、第 3 パラメータ true/false のイベントフローの問題を考慮して、多くの実験を試みましたが、まだ完全な解決策を見つけることができません

「mouseup」イベントは 2 回目の監視に失敗しましたが、通常はフォーカスを取り戻します (マウスを別の場所でクリックするだけです)