drag

vue和H5 draggable实现拖拽并替换效果

前言 公司项目需要做拖拽替换效果,本人用的vue框架。在网上找了很多资料都是用的 Vue.Draggable(git地址)。但这个组件实现的拖拽后插入效果,我倒腾了很久也没有替换效果(如果Vue.Draggable能实现拖拽替换效果的话请大神给我留言)。 JQ有实现拖拽的插件,我下载过一个插件并看过源码,大致原理是给目标元素设置定位属性,通过监听鼠标mousedown,mouseup事件,再计算鼠... »

Vue 基于 vuedraggable 实现选中、拖拽、排序效果

今天有个朋友说要做个效果:Vue实现拖拽排序,要有 checked,输出结果是排序后的,要全选,未选中的不能拖动。 其实我之前基于 Sortable 做过一个类似的效果。也给他看过了,没看太明白,他就自己基于 vuedraggable 实现了一下。 正好有点问题给他解决了一下。废话不多说,先上最终效果:Vue 拖拽排序效果 测试地址。下面就是最终效果图。 效果一:实现选中 和 全选效果 就下面这样... »

vue-drag-chart 拖动/缩放图表组件的实例代码

vue-drag-chart 一个可以拖动 / 缩放的图表组件 使用 npm i vue-drag-chart --save import VueDragChart from "../src/vue-drag-chart/index.vue"; components: { //注册插件 VueDragChart }, <VueDragChart :list="item" v-for="(it... »

Vue使用vue-draggable 插件在不同列表之间拖拽功能

今天分享一个vue项目中在不同列表拖拽设置选项的功能,这个功能也是在做项目中遇到的,先说下这个功能的要点(参考下图),有2个列表,左侧列表展示已选,右侧列表展示未选,通过拖拽进行设置,已选的选项不能超过4个,超过的话自动将拖拽之前的最后一项清除到右侧,且如果从已选往未选里拖的时候,右侧显示垃圾桶的提示(如图)。 拖拽功能图片: 垃圾桶显示图: 首先讲讲vue-draggable的使用 安装vue-... »

在这里插入图片描述

QT Quick Qml 实例——滑块拖动颜色框的平移(Gradient、drag、clip、transform、antialiasing)

文章目录1. 简介2. 详解 1. 简介         今天弄了一个实例,当我们拖动滑块的时候,黄绿颜色也会随着拖动而变化。在此中用到了 Gradient颜色渐变、drag实现了滑块、transform的平移、ITem属性的clip,最难处理的是,当长宽变化后,如何去保持滑块和颜色比列不变(小菜鸟的自以为)当然再怎么描述也不如仔细瞅一瞅~ ( 说个题外话,CSDN不方便传视频,但可以转gif再传... »

(一)HTML5之拖放(drag and drop)

HTML5新增了哪些新特性: (1)语义化标签 header footer nav article aside等; (2)拖放(drag and drop)API; (3)视频、音频(video  audio)API; (4)地理定位(Geolocation)API; (5)应用缓存; (6)存储(localStorage sessionStorage); (7)画布canvas; (8)webw... »

Drag,drag,drag!拽出哔哩哔哩侧边导航组件

Drag,drag,drag!拽出哔哩哔哩侧边导航组件

一.前言 文章主要以宏观的形式来聊哔哩哔哩侧边导航拖拽组件,非常适合正在渐进式学习VUE的你,适当的模仿开发项目是前端学习必须要有的技能。大多数人都知道的是,面试需要有自己的作品,而作品最重要的不是切页面,而是:创新+用户体验+性能优化+技术展示 。作者也是一个前端小白,正在摸索阶段,我今天讲解的是模仿我觉得做的不错的侧边导航栏,希望大家有收获。让我们一起来,淡黄的长裙,蓬松的头发,拽拽拽! 组件... »

基于vue-draggable 实现三级拖动排序效果

基于vue-draggable 实现三级拖动排序效果

vue-draggable 之前项目中需要用到拖动排序,就去网上找资料,本来最开始是想用jquery-ui里的拖动的,后面发现不符合我的预期也不知道能不能跟vue.js兼容,后面我试过了,单个的可以但是层级太多就不一样了。 废话少说直接上代码 先看数据结构,和页面的呈现,等会再来上代码。 这就是三层结构渲染出来的图。那个海锚一样的东西是可以点击的,点击后会出现当前类型所带的产品。等会会说的 我们现... »

jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)

本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法。分享给大家供大家参考,具体如下: 该插件是文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧。 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高。整体代码如下: <!DOCTYPE ... »

使用jQuery的easydrag插件实现可拖动的DIV弹出框

EasyDrag 是一个用来实现页面元素拖拉的 jQuery 插件。 在没遇到easydrag插件之前,想实现一个弹出框并不是一件轻而易举的事情! 人们常说没有不劳而获的事情,但在编码的世界中却不是这样。更多的开源框架方面了我们,也毒害了我们! 废话少说,先看效果: 全部代码: <!DOCTYPE HTML> <html> <head> <title>... »

基于vue-draggable 实现三级拖动排序效果

基于vue-draggable 实现三级拖动排序效果

vue-draggable 之前项目中需要用到拖动排序,就去网上找资料,本来最开始是想用jquery-ui里的拖动的,后面发现不符合我的预期也不知道能不能跟vue.js兼容,后面我试过了,单个的可以但是层级太多就不一样了。 废话少说直接上代码 先看数据结构,和页面的呈现,等会再来上代码。 这就是三层结构渲染出来的图。那个海锚一样的东西是可以点击的,点击后会出现当前类型所带的产品。等会会说的 我们现... »