vueカスタムコマンド-(ドラッグコマンド)
1574 ワード
コピー＆ペーストを使用可能
<style type="text/css">
* {
padding: 0;
margin: 0;
}
</style>
<div id="app">
<div class="box" v-trag="" style="width: 100px; height: 100px; background: #00B7EE;"/>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"/>
<script type="text/javascript">
(function() {
Vue.directive('trag', (el, binding) => {
el.style.position ='absolute';
el.onmousedown = function(e) {
var startX = e.clientX - el.offsetLeft;
var startY = e.clientY - el.offsetTop;
document.onmousemove = function(e) {
var endX = e.clientX - startX;
var endY = e.clientY- startY;
el.style.left = endX + 'px';
el.style.top = endY + 'px';
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
}
})
var vm = new Vue({
el: '#app'
})
})()
</script>
</code></pre>
</article>
</div>
</div>