Javascriptでサイズ変更を実装するにはどうすればよいですか？

Question

jQueryなどのJavascriptフレームワークではサイズ変更機能が提供されていますが、Javascriptについて詳しく知るには、実装方法を理解したいと思います。

私はいくつかの方法を考えることができますが、実際にどのように実装されていますか？ mouseoverイベントは要素全体に適用されるので、マウスが要素の端にマウスを置いたときにのみサイズ変更を許可する方法はありますか？

一般的な実装方法がいくつかありますが、その違いは何ですか？当面Javascriptで回避できない重大な制限はありますか？

詳細レベルの回答は高く評価されます。また、「魔法」が起きるフレームワークソースコードの関連部分に私を導くことができれば、それは同様に評価されるだろうが、必要ではない。

Answer 1

実際には、サイズ変更のエッジは、サイズ変更のためにマウスイベントを処理する別々の要素です。

単純な古いJavaScriptを使用してサイズ変更領域を作成するのは面倒な作業であり、フレームワークを使用して達成できる効果のコードをさらに記述する必要があります。

Answer 2

私はあなたのための例を書く時間がかかりました。それはここにある：

http://blixt.org/js/resize.html

（注：私はそれがクロスブラウザの互換性だったことを確認するには時間がかかりませんでしたので、これはおそらく、すべてのブラウザでは動作しません）

基本的には、mousemoveイベントを使用してカーソルが要素の端からどのくらい離れているかを確認し、端に十分に近い場合にそのエッジのカーソルを表示することです。ここにJavaScriptがあります：

（注：実際のプロジェクトでは、ブラウザ間の互換性、メンテナンス性、およびライブラリ間のやり取りの改善のためにこれを非常に異なった方法でコーディングします。jQueryなどのフレームワークを使用する必要があります。これらすべてのことについて既に考えていました）。

var r = document.getElementById('resizable'); 
r.onmousemove = function (e) { 
    if (!e) e = window.event; 

    var 
    // Get the distances to all the edges. 
    // e.clientX is the X coordinate on the client area (window) of the mouse. 
    // r.offsetLeft is the horizontal offset from the page left. 
    // r.offsetWidth is the total width of the element. 
    left = e.clientX - r.offsetLeft, top = e.clientY - r.offsetTop, 
    bottom = r.offsetHeight - top, right = r.offsetWidth - left, 
    // Get the shortest distance to any of the edges. 
    min = Math.min(Math.min(Math.min(top, left), bottom), right); 

    // If the pointer is further than 5 pixels from an edge, do not display 
    // any resize cursor. 
    if (min > 5) { 
     r.style.cursor = 'default'; 
     return; 
    } 

    // Determine which cursor to display. 
    switch (min) { 
     case top: 
      r.style.cursor = 'n-resize'; 
      break; 
     case left: 
      r.style.cursor = 'w-resize'; 
      break; 
     case bottom: 
      r.style.cursor = 's-resize'; 
      break; 
     case right: 
      r.style.cursor = 'e-resize'; 
      break; 
    } 
}