<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{background: red;height: 100px;width: 100px;}
</style>
</head>
<body>
<div id="app">
<div class="box" v-drag.y="opts">1111</div>
</div>
<script src="js/vue.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
Vue.directive('drag',{
bind(el,binding){
//定位
$(el).css("position","absolute");
//设置元素的鼠标按下事件
$(el).on("mousedown",function(ev){
//鼠标按下时的位置
var disX=0
var disY=0
//判断用户是否指定了偏移坐标
//查看binding里的value值是否有指定offsetX
if(binding.value&&binding.value.offsetX){
disX=binding.value.offsetX
}else{
disX = ev.pageX-$(el).offset().left;
};
//查看binding里的value值是否有指定offsetY
if(binding.value&&binding.value.offsetY){
disY=binding.value.offsetY
}else{
disY = ev.pageX-$(el).offset().top;
}
//设置鼠标移动事件
$(document).on('mousemove',function(ev){
$(el).css({
left:ev.pageX - disX,
top:ev.pageY - disY
});
});
$(document).on('mouseup',function(ev){
$(document).off();
})
})
}
});
var vm = new Vue({
el:"#app",
data:{
msg:"hello",
opts:{
offsetX:50,
offsetY:50
}
}
})
</script>
</body>
</html>
14_test_自定义拖拽指令
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 关键字：directive 指令的作用域: 默认情况下子控制器和父控制器用的是同一个$scope,也就是说子控制器...
- 【JS-8】 angular js自定义指令 directive 如何使用？为什么要使用封装的自定义指令？ 小课堂...
- [一] Vue mixins(混合) 作用：为组件定义可复用的方法，可以在 mixin对象 里定义组件的任何属性，...
