vue组件拖拽自定义界面,vue拖拽表单设计器

　　这篇文章主要为大家详细介绍了某视频剪辑软件实现拖拽小图标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　如何给某视频剪辑软件项目里面写拖拽悬浮小图标呢，供大家参考，具体内容如下

　　首先

　　1、html文件一定要给父盒子一个身份

　　差异

　　傅玄

　　id=moveDiv

　　@mousedown=down()

　　@touchstart=down()

　　@mousemove.prevent.stop=move()

　　@touchmove.prevent.stop=move()

　　@mouseup=end()

　　@touchend=end()

　　img class=img-kf src=././assets/images/csVip/kf.png /

　　/div

　　2、在数据里面设置

　　位置：{ x: 0，y: 0 }，

　　nx: ，

　　纽约： ,

　　dx: ，

　　死亡： ,

　　xPum: ，

　　yPum: ，

　　3、在方法里面写拖拽方法

　　//移动端拖拽事件

　　向下(){

　　this.flags=true

　　让触摸；

　　if (event.touches) {

　　触摸=事件。触摸[0]；

　　}否则{

　　触摸=事件；

　　}

　　这个。位置。x=触摸。clientx

　　这个。位置。y=触摸。客户关系；

　　这个。dx=移动分区。向左偏移；

　　这个。dy=移动分区。offsettop

　　},

　　move() {

　　if (this.flags) {

　　让触摸；

　　if (event.touches) {

　　触摸=事件。触摸[0]；

　　}否则{

　　触摸=事件；

　　}

　　这个。NX=触摸。clientx-这个。位置。x；

　　这个。ny=触摸。客户-这个。位置。y；

　　这个。xpum=这个。dx这个。NX；

　　这个。ypum=这个。死了吧。ny；

　　//添加限制：只允许在屏幕内拖动

　　//屏幕宽度减去悬浮框宽高

　　const maxWidth=document。身体。客户端宽度-54；

　　const最大高度=文档。身体。客户身高-54；

　　if (this.xPum 0) {

　　//屏幕x限制

　　这个。xpum=0；

　　} else if (this.xPum maxWidth) {

　　this.xPum=maxWidth

　　}

　　if (this.yPum 0) {

　　//屏幕y限制

　　这个。ypum=0；

　　} else if (this.yPum maxHeight) {

　　this.yPum=maxHeight

　　}

　　移动分区。风格。左=这个。xpum“px”；

　　移动分区。风格。top=这个。ypum“px”；

　　//阻止页面的滑动默认事件

　　document.addEventListener(

　　触摸移动，

　　函数(){

　　//1.2 如果碰到滑动问题，请注意是否获取到触摸移动

　　//事件。防止默认()；//jq阻止冒泡事件

　　事件。停止传播()；//如果没有引入日本季刊日本季刊就用停止传播()

　　},

　　错误的

　　);

　　}

　　},

　　//鼠标释放时候的函数

　　end() {

　　this.flags=false

　　},

　　4、css样式。傅玄{

　　宽度：1.7雷姆；

　　身高：1.7雷姆；

　　边界半径：50%;

　　//背景：rgb(213，91，91)；

　　位置：固定；

　　底部：4个项目

　　右：0.4雷姆；

　　z指数：9999999999;

　　文本对齐：居中；img-kf {

　　宽度：1.7雷姆；

　　身高：1.7雷姆；

　　}

　　}

　　到这里，我们的悬浮小图标就做完了。

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。