ホームページ > 記事 > WeChat アプレット > Vueを使ってDIVを操作する方法
Vueを使ってDIVを操作する方法
- php中世界最好的语言オリジナル
- 2018-06-04 15:13:474669ブラウズ
今回はVueを使ってDIVを操作する方法と、Vueを使ってDIVを操作する際の注意点を紹介します。
レンダリング
demo1.gif
クライアントYページYスクリーンYレイヤーYオフセットYの違いを明確にする
ドラッグ効果を作りたいとき、これらの属性の違いを区別する必要があり、これにはいくつかの属性が使用されますドラッグ効果を実現する前に、マウス クリックのオフセット値を計算する必要があります。
clientY は、表示されているページの左上隅からの距離を指します。表示されているページの左上隅からの距離 (ページのスクロールの影響を受けません)
screenY は画面の左上隅からの距離を指します
layerY は画面の最も近い左上隅までの距離を指します またはその親要素
offsetY は親要素からの距離を指します 左上隅からの距離
絵を見ると簡単に理解できます
違い
これらの属性を簡単に理解した後、次のことが起こります。区別する必要があるいくつかの属性。|
類似点 | 相違点||
|---|---|---|
| ページの左上隅からの距離 | ページスクロールの影響 | |
| ページの左上隅からの距離 | 影響なしページスクロールによる |
| 同じ点 | 相違点 | |
|---|---|---|
| 要素の位置の影響を受ける最初の位置決めは要素 | offsetY | |
| の左上隅までの距離は、この要素の左上隅を基準として計算されます。位置決め問題は内側の交点を計算します。これは | IEブラウザ |
layerYとoffsetYの違い
ドラッグアンドドロップ機能を実装します
これらのoffset属性の意味を理解したところで、次は私たちの焦点に入ります。早速、コードに進みましょう
// darg.html<style>
#app{
position: relative; /*定位*/
top: 10px;
left: 10px;
width: 200px;
height: 200px;
background: #666; /*设置一下背景*/
}
</style>
<body>
<p id="app" @mousedown="move"> <!--绑定按下事件-->
{{positionX}}
{{positionY}}
</p>
</body>
//main.js
let app = new Vue({
el:'#app',
data:{
positionX:0,
positionY:0,
},
methods:{
move(e){
let op = e.target; //获取目标元素
//算出鼠标相对元素的位置
let disX = e.clientX - op.offsetLeft;
let disY = e.clientY - op.offsetTop;
document.onmousemove = (e)=>{ //鼠标按下并移动的事件
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
//绑定元素位置到positionX和positionY上面
this.positionX = top;
this.positionY = left;
//移动当前元素
op.style.left = left + 'px';
op.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
}
},
computed:{},
}); もちろん、これをカスタム コマンドとしてバインドして、呼び出しコマンドを使用してドラッグ アンド ドロップ効果を実現できます。はカスタムの定義です。 命令を定義するコードです
// darg.html<style>
#app{
position: relative; /*定位*/
top: 10px;
left: 10px;
width: 200px;
height: 200px;
background: #666; /*设置一下背景*/
}
</style>
<body>
<p id="app" v-drag> <!--实现用指令形式实现拖拽效果-->
</p>
</body>
//main.js
let app = new Vue({
el:'#app',
data:{},
methods:{},
directives: {
drag: {
// 指令的定义
bind: function (el) {
let op = el; //获取当前元素
op.onmousedown = (e) => {
//算出鼠标相对元素的位置
let disX = e.clientX - op.offsetLeft;
let disY = e.clientY - op.offsetTop;
document.onmousemove = (e)=>{
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
//绑定元素位置到positionX和positionY上面
this.positionX = top;
this.positionY = left;
//移动当前元素
op.style.left = left + 'px';
op.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
}
}
}); この記事のケースを読んだ後は、メソッドを習得したと思います。さらに興味深い情報については、 に関する他の関連記事に注目してください。 PHPの中国語サイトです！ 推奨読書:
utils.jsユースケースの詳細な説明
以上がVueを使ってDIVを操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。