ホームページ  >  記事  >  ウェブフロントエンド  >  JS はドラッグ イベントを使用してオブジェクトのサイズを変更します

JS はドラッグ イベントを使用してオブジェクトのサイズを変更します

php中世界最好的语言
php中世界最好的语言オリジナル
2018-04-13 11:32:251348ブラウズ

今回はJSでドラッグイベントを使ってオブジェクトのサイズを変更する場合の注意事項を紹介します。

ドラッグしてオブジェクトサイズを変更する機能: 黄色の小さなPをドラッグして、緑の大きなPの幅と高さを変更します

主な実装は 3 つのステップで構成されます:

1. ID
を通じて 2 つの p のサイズを取得します。 2. 小さい p に onmousedown イベント
を追加します。 3. onmousemoveonmouseup イベント を、 マウスダウン時イベント 解析図から、ドラッグ時にオブジェクトの増加する幅の値を取得するだけでよいことがわかり、問題は解決されました

<p id="panel">
  <p id="dragIcon"></p>
</p>

スタイルを追加してください

rreee

js 実装コード:

<style>
    #panel{
      position: absolute;
      width: 200px;height: 200px;
      background: green;
    }
    #dragIcon{
      position: absolute;bottom: 0;right: 0;
      width: 20px;height: 20px;
      background: yellow;
    }
</style>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue.js シームレスなスクロール効果を実現する詳細な手順


React Server レンダリングを実装する詳細な手順


以上がJS はドラッグ イベントを使用してオブジェクトのサイズを変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。