angular 10.0+ drag and drop
Demo
https://mattlewis92.github.io/angular-draggable-droppable/
Table of contents
About
Observable powered drag and drop for angular 10.0+
Installation
Install through npm:
npm install angular-draggable-droppable
Then use it in your app like so:
import { Component, NgModule } from '@angular/core';
import { DragAndDropModule } from 'angular-draggable-droppable';
@NgModule({
declarations: [DemoApp],
imports: [DragAndDropModule],
bootstrap: [DemoApp],
})
class DemoModule {}
@Component({
selector: 'demo-app',
template: `
<div mwlDraggable (dragEnd)="dragEnd($event)">Drag me!</div>
<div mwlDroppable (drop)="this.droppedData = $event.dropData">
<span [hidden]="droppedData">Drop here</span>
<span [hidden]="!droppedData"
>Item dropped here with data: "{{ droppedData }}"!</span
>
</div>
`,
})
class DemoApp {
droppedData: string;
dragEnd(event) {
console.log('Element was dragged', event);
}
}
Note: if draggable elements are inside a scrollable element then you will need to add mwlDraggableScrollContainer as an attribute to the scrollable container.
You may also find it useful to view the demo source.
Documentation
All documentation is auto-generated from the source and can be viewed here:https://mattlewis92.github.io/angular-draggable-droppable/docs/
Alternatives
I wrote this library because I needed drag and drop whilst snapping to a grid. If you don't need this feature then I recommend checking out one of these other awesome drag and drop libraries:
Development
Prepare your environment
- Install Node.js and NPM (should come with)
- Install local dev dependencies:
npm installwhile current directory is this repo
Development server
Run npm start to start a development server on port 8000 with auto reload + tests.
Testing
Run npm test to run tests once or npm run test:watch to continually run tests.
Release
npm run release
License
MIT
-
拖动元素到指定区域 拖放的同时传递数据 1. 安装 ng2-drag-drop npm install ng2-drag-drop --save 2. 模板中配置可拖拽元素 // drag.component.html <div> <a href="javascript:;" *ngFor="let item of sysData" draggable [
-
1.构建并运行angular应用 官方文档讲解：构建并运行angular应用 2.ChangeDetection 作用：检测程序内部状态，然后反映到UI上。 引起状态变化：Events（事件）、XHR（异步请求）、Timers（定时器）。 ApplicationRef监听NgZone的onTurnDone，然后执行检测。 默认策略 在angular中，每个组件渲染的时候都有对应的状态变化。每个组件
-
注：代码已上传到github,仅作为demo进行演示并学习,没有进行进一步开发,如有问题请随时联系我 github demo地址:https://github.com/Mr-WangZhe/DirectiveDemo 一.指令 1.什么是指令 组件是一种自带模板的指令 结构型（Structural）指令和属性型（Attribute）指令 2.Renderer2和ElementRef Angular
-
我遇到的问题是，我自己自定义的拖拽事件，在执行的过程中，拖拽的时候，组件之间的样式和定义的方法并没有执行。希望能帮我解决一下，谢谢了！！！ 首先，是自定义的文件 drag.directive.ts import { Directive, Input, ElementRef, Renderer2, HostListener } from "@angular/core"; import { DragD
-
angular使用原生拖拽页面卡顿及表单控件输入延迟怎么办 发布时间：2020-08-01 11:59:40 来源：亿速云 阅读：103 作者：小猪 这篇文章主要为大家展示了angular使用原生拖拽页面卡顿及表单控件输入延迟怎么办，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。 说明 之前有一个angular项目,页面上表单不算多，也就一百来个(这个
-
Categories: Interactions version added: 1.0 Description: 该组件可以让你使用鼠标拖动所有元素。 QuickNavExamples Options addClasses appendTo axis cancel connectToSortable containment cursor cursorAt delay disabled distan
-
UIView-draggable 是个带有拖拽功能的 UIView 类。
-
Draggable Tabs 是一个可拖动的 Tab 控件
-
Draggable Accordion 是一个可拖放的拉帘
-
draggable-vue-directive Vue directive (Vue.js 2.x) for handling element drag & drop. Installation npm install draggable-vue-directive --save Demo You can view the live demo here: https://israelzablian
-
一个基于jQuery的拖放插件，易于使用，所有的操作均通过调用draggable进行。 基本用法： $('#dd').draggable(); $('#dd').draggable({handle:'#title'}); 停止拖放：$('#dd').draggable({disabled:true}); 恢复拖放：$('#dd').draggable({disabled:false});