目录安装依赖 vuedraggable实现拖拽的要点行拖拽要点列拖拽要点完整范例代码安装依赖 vu
原创
2022-07-12 17:01:16
4988阅读
Vue2项目中遇到需求要求页面左侧部分实现拖拽效果
原创
2023-02-14 14:55:49
916阅读
需求: 想要实现这样的一个需求,左边是组件库。中间是展示。拖拉组件到中间就形成一个组件。刚开始用的form-create,发现不行,又用的form-create-design,但vue3版本的只有element plus库,系统刚开始用的ant-design,而且左边我只需要单行输入框和多行输入框组件就够了,有点用宰牛刀的感觉,而且右侧还不能自定义,看悟空CRM的源码看的
转载
2024-02-12 21:58:09
490阅读
Vuedraggable 拖拽组件插件Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子,使用起来特别简单对被拖拽元素也没有CSS样式的特殊要求。注意:只支持vue2安装:n
转载
2024-02-28 16:54:31
660阅读
# Axios中参数在body中的用法
Axios 是一个基于 Promise 的 HTTP 客户端,可以用于浏览器和 Node.js 环境中发送 HTTP 请求。在实际开发中,我们经常需要向服务器发送 POST 请求,并且需要将参数放在请求的 body 中传递。本文将介绍如何在 Axios 中将参数放在 body 中发送请求,并且通过代码示例详细说明这个过程。
## Axios 中参数在 b
原创
2024-06-18 05:18:30
274阅读
<template> <div id='pondModel'> <span v-for='(item,index) in 6' :key='index' @mousedown="move" ></span> </div><template>methods: { move(e){ let odiv = e.target let disX =e.clientX - odiv.offsetLe
原创
2022-03-29 16:21:44
958阅读
自己后来总结的,数组为空时,拖不进去踩的坑首先可以先看一下npm的官方文档:https://www.npmjs.com/package/vuedraggablehttp://www.itxst.com/vue-draggable/2ynnruzu.htmlhttps://www.jianshu.com/p/382ac5f9d6ff 先理解一下,能看懂官方文档更好,看不懂,来看看项目中的实践。1.先
转载
2024-04-06 20:36:59
96阅读
1. 安装依赖 vuedraggablenpm i -S vuedraggable
原创
2022-07-12 17:19:03
1791阅读
项目中做看板重构时遇到的开发需求,不能使用组件,乍一看感觉很头大,但实际上手做出来后还是小有成就的。浏览图:性能探究(一):使用对象代替数组匹配数据,从而省去遍历操作小demo演示——拖拽移动: 滚轮缩放:直接进入正题:先创建一个简单的vue demo项目<template>
<div class="drag">
<div class="back_box"
转载
2024-08-26 12:03:35
806阅读
vue中常见的传值方式平时项目开发中,经常使用的VUE开发的时候,会把一些功能相似的模块封装成一个组件。向组件传入相关信息,然后就可以实现功能的输出,不必注重内在逻辑的实现,这可以理解为封装。组件的主要的通信方式就是’接口’,这个接口可以是一个参数或者是一个函数操作的开始。哈哈 … ,说了这么多这是我自己的见解。我们具体说说VUE的传值方式。VUE中的传值方式有几种常见的方式,例如:父子组件通信、
转载
2023-12-15 06:44:24
183阅读
之前有写过Vue.Draggable实现拖拽效果(快速使用)最近项目中要用到这个拖拽的效果,当产品那个今日头条app编辑导航,拖拽的效果时,心里暗爽,(之前玩过呀,很简单的,事实证明,任何看似简单的东西,实现起来都不会那么一帆风顺,当然:当你真正实现了该效果时,会发现其实还是挺简单的:ps:自说自话,自己打自己脸\(^o^)/~),闲话少说,直接切入正题: 仔细观察发现,今日头条导航部分编辑
前一阵子拜访了一些小伙伴,大家都表示苦前端太久了,需要花费不少时间在前端开发上。本着在不损失灵活性的前提下尽可能提高开发效率的原则,作者尝试在框架内集成了拖拽方式生成Vue用户界面的功能作为补充,以方便快速生成增删改查界面,也可以用于大屏展示及简单的网页制作。一、技术原理1.1 布局 目前仅实现了基于vue-grid-layout的网格布局,设计画布上的每个组件动态加载至对应的GridIte
转载
2023-09-27 12:59:20
291阅读
vue开发公众号项目,***产品需要添加一个新的功能。拖拽功能。一听简单。百度上轮子挺多,直接拉一个过来用着就行。然鹅。。。兴奋之余,却失望至极。东西很多,没有一个能使得。你让我失望,那我就让你绝望。于是,拖拽的故事就开始了。。 vue拖拽功能组件源码 vue拖拽功能组件源码 vue拖拽功能 必备知
原创
2021-07-19 16:21:19
1698阅读
最终效果组件代码<template> <!-- 拖拽交换位置效果 --> <transition-group tag="divdex) ...
转载
2023-01-03 14:56:40
363阅读
在 Vue 中实现拖拽排序功能,常用的方式是使用第三方库来简化开发。一个流行的库是 Vue.Draggable,它是基于 Sortable.js 的封装,提供了简便的方式来实现拖拽排序。1. 使用 Vue.Draggable 实现拖拽排序1.1 安装 Vue.Draggable首先,安装 vuedraggable:npm install vuedraggable1.2 示例代码接下来,在 Vue
# 使用jQuery在body中填充HTML的步骤
在这篇文章中,我将向你介绍如何使用jQuery在网页的body中填充HTML内容。这是一个简单而实用的技巧,可以让你在网页中动态地插入内容,提升用户体验。我会逐步告诉你整个过程,并提供所需的代码和注释。
## 步骤概览
下面是整个过程的步骤概览。我们将使用jQuery库来实现这个功能。
```mermaid
flowchart TD
原创
2023-08-20 10:47:05
204阅读
这一次的需求是元素能根据鼠标滚轮缩放,能用鼠标拖动的效果????????解析一开始想直接网上冲浪找源代码,没成想找了大半天没有合适的,然后自己上手参考多方版本最后产出缝合怪。
因为项目中涉及很多dom操作,所以选择jQuery来进行操作会省很多代码量(版本3.6.0);滚动事件火狐和谷歌不兼容,所以使用不同的操作逻辑;定义每滚动一次滚轮,放大或缩小10%,控制最小缩放层级为0.1。
转载
2021-08-18 19:16:00
316阅读
2评论
在 Vue 2 中实现可拖拽排序指令:v-sortable在开发过程中,我们经常需要实现元素的拖拽排序功能。本文将详细介绍如何在 Vue 2 中创建一个自定义指令 v-sortable,使元素可以拖拽并交换位置,同时更新数据的位置。自定义指令 v-sortable首先,我们需要创建一个自定义指令 v-sortable,它使元素可拖动并处理拖放事件。创建自定义指令 sortable.js// dir
原创
精选
2024-08-28 08:45:40
346阅读
# Vue Axios Get Body:如何在Vue中使用Axios发送GET请求并获取响应体
在Vue项目中,经常需要与后端服务器进行数据交互。而Axios是一个基于Promise的HTTP客户端,可以用于在Vue中发送HTTP请求。本文将介绍如何在Vue项目中使用Axios发送GET请求,并获取响应体。
## 安装Axios
首先,需要安装Axios。可以通过npm或yarn进行安装:
原创
2024-03-04 06:46:39
87阅读
# 在 Vue 项目中使用 Axios 发送请求的完整指南
Vue.js 是一个流行的前端框架,而 Axios 则是一个基于 Promise 的 HTTP 客户端,它可以用来发送 HTTP 请求。结合这两者,我们可以轻松地在 Vue 应用中与后端服务进行交互。在这篇文章中,我们将探讨在 Vue 项目中如何使用 Axios 设置请求体(body),并提供代码示例来演示其用法。
## 什么是 Ax