angular table拖拽插件sortablejs

古城微笑少年丶 2023-06-19 02:24 33阅读 0赞

1、npm 安装 sortablejs

npm install sortablejs --save

// 只用这一个插件就可以实现拖拽，但是 angular 会报：无法找到模块“sortablejs”的声明文件。

再安装 ngx-sortablejs

npm install ngx-sortablejs --save

安装好后在 package.json 里查看一下版本号，如果是 3.几就行

"ngx-sortablejs": "^3.1.3",

2、调用方法：

在需要引用的module.ts里 imports SortablejsModule.forRoot(\{ animation: 150 \})

**app.module.ts**

import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppComponent } from './app.component';
    import { SortablejsModule } from 'ngx-sortablejs'
    
    @NgModule({
      declarations: [AppComponent],
      imports: [BrowserModule, SortablejsModule.forRoot({ animation: 150 })],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

**home.component.ts**

import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html'
    })
    
    export class HomeComponent {
      items = ['1', '2', '3', '4', '5'];
    }

**home.component.html**

<div border="1" [sortablejs]="items">
        <div *ngFor="let item of items" style="width: 200px;border: 1px solid green;height: 50px;">
            {
       {item}}
        </div>
    </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关 el-table行拖拽排序效果的实现（基于sortablejs）

前言 ElementUI中的`Table`组件对于展示数据来说，有着不可替代的作用。但是也有一点点小缺陷，比如行不支持拖拽效果。当然我们可以借助于第三方库来实现行拖

墨蓝/ 2024年04月01日 17:01/ 0 赞/ 176 阅读

相关 SortableJS/Sortable拖拽组件，使用详细（Sortablejs安装使用）

简介：作为一名前端开发人员，在工作中难免会遇到拖拽功能，分享一个`github`上一个不错的拖拽`js库`，能满足我们在项目开发中的需要，支持`Vue`和`React`，下面

男娘i/ 2023年10月04日 21:35/ 0 赞/ 168 阅读

相关 angular table拖拽插件sortablejs

1、npm 安装 sortablejs npm install sortablejs --save // 只用这一个插件就可以实现拖拽，但是 angular 会报：无法找到

古城微笑少年丶/ 2023年06月19日 02:24/ 0 赞/ 34 阅读

相关 VUE + Element UI + Sortablejs插件实现table列表的拖拽功能

背景： > 实现页面用户自定义 table列表拖拽排序步骤：一、导入 Sortablejs插件 npm

青旅半醒/ 2023年06月18日 12:50/ 0 赞/ 109 阅读

相关拖拽插件vuedraggable的使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5

r囧r小猫/ 2023年06月14日 10:55/ 0 赞/ 29 阅读

相关 Vue---Vue+Element项目使用sortablejs插件实现表格拖拽排序

安装sortablejs插件 npm install sortablejs --save 页面引入sortablejs实现拖拽排序 el

小鱼儿/ 2023年02月18日 09:32/ 0 赞/ 26 阅读

相关 element ui table中使用拖拽排序组件sortablejs及注意事项

element ui table中使用拖拽排序组件sortablejs及注意事项 1.使用：先安装 `sortablejs`插件,然后在当前页面引入 n

àì夳堔傛蜴生んèń/ 2022年11月07日 14:32/ 0 赞/ 213 阅读

相关 JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

前言：前天刚写了篇[JS组件系列——Bootstrap Table 表格行拖拽][JS_Bootstrap Table]，今天接到新的需要，需要在之前表格行拖拽的基础上能够同时

旧城等待，/ 2022年07月13日 02:54/ 0 赞/ 530 阅读

相关前端插件之拖拽

1.拖拽的插件很多，其实我们只要明白他的原理，就不难了：之所以形成拖拽的效果，是在鼠标按下onmousedown的时候记录鼠标坐标与被拖拽div左边界，上边界的距离disX

阳光穿透心脏的1/2处/ 2022年06月09日 08:22/ 0 赞/ 575 阅读

相关 elementUI Table组件实现拖拽效果

背景使用`Element UI Table`\+`Vue`实现表格的拖拽。在`GitHub`上搜索了下发现[Sortable][]这款插件挺不错的，`Star14000

矫情吗；*/ 2022年04月22日 06:50/ 0 赞/ 692 阅读