Angular7 Drag and Drop
完整代码在最后,下面讲解以此代码为例
1.环境配置
1.1 安装@angular/material、@angular/cdk
cnpm install --save @angular/material @angular/cdk
1.2 app.modules.ts导入
import { DragDropModule } from '@angular/cdk/drag-drop';
imports: [
...
DragDropModule
]
2.功能实现
2.1 拖拽
html编辑如下代码即可:
<div cdkDrag class="drag-box"
drag me
</div>
2.2 排序
html:
<h3>列表排序</h3>
<div class="box-list" cdkDropList (cdkDropListDropped)="drop($event)">
<div class="drag-box" *ngFor="let customer of customers" cdkDrag>
{{customer.name}}
</div>
</div>
ts:
import { ...CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; customers = [
{ name: 'Adam', age: 23 },
{ name: 'Jack', age: 27 },
{ name: 'Katherin', age: 26 },
{ name: 'John', age: 30 },
{ name: 'Watson', age: 42 },
]; drop(event: CdkDragDrop<string[]>) {
console.log('列表排序:', event, this.customers);
moveItemInArray(this.customers, event.previousIndex, event.currentIndex);
}
执行如下操作:
打印结果:
2.3 横向排序
html:
<h3>横向排序</h3>
<div class="box-list-horizontal" cdkDropList cdkDropListOrientation="horizontal"
(cdkDropListDropped)="drop($event)">
<div class="drag-box" *ngFor="let customer of customers" cdkDrag>
{{customer.name}}
</div>
</div>
2.4 添加动画效果
为了设置动画,我们定义了一个以transform属性为目标的转换。拖放CDK支持动画:
--对列表中的元素进行拖动排序时的动画=> .cdk-drag
.cdk-drag {
transition: transform 100ms ease;
}
--从动画的位置到最终把它放在列表的位置上时的动画=> .cdk-drag-animating
.cdk-drag-animating {
transition: transform 300ms ease;
}
2.5 占位符元素 placeholder
默认占位符
使用.cdk-drag-placeholder来显示占位符元素,而不是实际的元素,因为它是在cdkDropList中拖动的。默认情况下,这看起来与正在排序的元素完全相同。
.cdk-drag-placeholder {
background: #ccc;
border: dotted 1px #999;
transition: transform 500ms ease;
}
拖拽时效果如下图:
自定义占位符
使用*cdkDragPlaceholder指令,我们可以用一个自定义的占位符来代替默认的占位符
html:
<div class="box-list customph" cdkDropList (cdkDropListDropped)="drop($event)">
<div class="drag-box dragList" *ngFor="let customer of customers" cdkDrag >
<div class="box-custom-placeholder" *cdkDragPlaceholder></div>
{{customer.name}}
</div>
</div>
css:
// 自定义占位符
.customph{
.box-custom-placeholder {
height: 28px;
width: 100px;
background: #fff;
border: dotted 1px #0084ff;
transition: transform 200ms ease;
} &.box-list.cdk-drop-list-dragging .drag-box:not(.cdk-drag-placeholder) {
transition: transform 500ms ease;
}
}
2.6 预览
当提取并拖动cdkDrag元素时,可以看到预览元素。默认情况下,预览元素看起来与被拖动的元素完全相同。
使用.cdk-drag-preview来定义预览CSS:
// 预览
.cdk-drag-preview {
height: 28px;
width: 100px;
box-shadow: 0 3px 3px -3px #0084ff;
}
我们还需要使用*cdkDragPreview提供一个自定义模板:
<div cdkDropList class="box-list" (cdkDropListDropped)="drop($event)">
<div class="drag-box dragList" *ngFor="let customer of customers" cdkDrag>
{{customer.name}}
<p *cdkDragPreview>Age: {{customer.age}}</p>
</div>
</div>
2.7 多个列表之间拖拽
我们可以使用cdkDropListConnectedTo属性将一个或多个cdkDropList连接到一起。然后设置cdkDropListData和cdkDragData,将数据与cdkDropList和cdkDrag关联起来。
html:
<div class="box-list" cdkDropList #inactiveList="cdkDropList" id="Inactive Customers"
[cdkDropListData]="inactiveCustomers" [cdkDropListConnectedTo]="[activeList]"
(cdkDropListDropped)="drop1($event)">
<div class="drag-box dragList"
[cdkDragData]="customer"
*ngFor="let customer of inactiveCustomers"
cdkDrag>
{{customer.name}}
</div>
</div>
<div class="box-list" cdkDropList #activeList="cdkDropList" id="Active Customers"
[cdkDropListData]="activeCustomers" [cdkDropListConnectedTo]="[inactiveList]"
(cdkDropListDropped)="drop1($event)">
<div class="drag-box dragList"
[cdkDragData]="customer"
*ngFor="let customer of activeCustomers"
cdkDrag>
{{customer.name}}
</div>
</div>
ts:
import { ...transferArrayItem } from '@angular/cdk/drag-drop'; inactiveCustomers = [
{name: 'Jack', age: 18},
{name: 'Katherin', age: 16},
{name: 'Adam', age: 36}
]; activeCustomers = [
{name: 'John', age: 10},
{name: 'Watson', age: 24}
]; drop1(event: CdkDragDrop<string[]>) {
console.log('拖拽事件:event', event);
if (event.previousContainer === event.container) {
console.log('拖拽事件',
`> 拖 '${event.item.data}' 到 '${event.container.id}'`);
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
console.log('拖拽事件',
`> 拖 '${event.item.data}' 到 '${event.container.id}'`);
transferArrayItem(
event.previousContainer.data, event.container.data,
event.previousIndex, event.currentIndex);
}
}
执行如下操作:
打印结果:
CdkDropListGroup
CdkDropListGroup指令的范围比CdkDropList要大一级。CdkDropListGroup可以包含多个CdkDropList。而且当CdkDropListGroup包含多个CdkDropList的时候,这些CdkDropList直接是相互connect的(CdkDropList就不用去写cdkDropListConnectedTo属性了)。
<div cdkDropListGroup>
<div class="box-list" cdkDropList id="Inactive Customers"
[cdkDropListData]="inactiveCustomers"
(cdkDropListDropped)="drop1($event)">
<div class="drag-box dragList" [cdkDragData]="customer"
*ngFor="let customer of inactiveCustomers" cdkDrag>
{{customer.name}}
</div>
</div>
<div class="box-list" cdkDropList id="Active Customers"
[cdkDropListData]="activeCustomers"
(cdkDropListDropped)="drop1($event)">
<div class="drag-box dragList"
[cdkDragData]="customer"
*ngFor="let customer of activeCustomers"
cdkDrag>
{{customer.name}}
</div>
</div>
</div>
2.8 事件监听
Drag Event Handlers
– cdkDragStarted: 当用户开始拖动时发出。
– cdkDragEnded: 当用户停止拖动时发出。
– cdkDragEntered: 将item移动到新容器中时发出。
– cdkDragExited: 将item移出当前容器时发出。
Drop Event Handlers
– cdkDropListDropped: emits when an item was dropped inside the container.
– cdkDropListEntered: emits when a new item is dragged into this container.
– cdkDropListExited: emits when an item is dragged from this container into another container.
cdkDragStarted、cdkDragEnded、cdkDragMoved
html:
<h3>事件监听</h3>
<div cdkDrag class="drag-box"
(cdkDragStarted)="dragStarted($event)"
(cdkDragEnded)="dragEnded($event)"
(cdkDragMoved)="dragMoved($event)"
>
drag me
</div>
<p>{{state}} {{position}}</p>
ts:
import { CdkDragEnd, CdkDragStart, CdkDragMove... } from '@angular/cdk/drag-drop'; dragStarted(event: CdkDragStart) {
this.state = '拖拽开始';
console.log('拖拽开始');
} dragEnded(event: CdkDragEnd) {
this.state = '拖拽结束';
console.log('拖拽结束');
} dragMoved(event: CdkDragMove) {
console.log('dragMoved');
this.position = `> Position X: ${event.pointerPosition.x} - Y: ${event.pointerPosition.y}`;
}
cdkDropListEntered、cdkDropListExited、cdkDragEntered、cdkDragExited
html:
<div class="box-list" cdkDropList #inactiveList="cdkDropList" id="Inactive Customers"
[cdkDropListData]="inactiveCustomers" [cdkDropListConnectedTo]="[activeList]"
(cdkDropListDropped)="drop1($event)"
(cdkDropListEntered)="dropListEntered($event)" (cdkDropListExited)="dropListExited($event)">
<div class="drag-box dragList" [cdkDragData]="customer"
(cdkDragEntered)="dragEntered($event)" (cdkDragExited)="dragExited($event)"
*ngFor="let customer of inactiveCustomers"
cdkDrag>
{{customer}}
</div>
</div>
<div class="box-list" cdkDropList #activeList="cdkDropList" id="Active Customers"
[cdkDropListData]="activeCustomers" [cdkDropListConnectedTo]="[inactiveList]"
(cdkDropListDropped)="drop1($event)">
<div class="drag-box dragList"
[cdkDragData]="customer"
*ngFor="let customer of activeCustomers"
cdkDrag>
{{customer}}
</div>
</div>
ts:
import { ...CdkDragEnter, CdkDragExit} from '@angular/cdk/drag-drop'; dragEntered(event: CdkDragEnter) {
console.log(`drag:把 '${event.item.data}' 拖进 '${event.container.id}' `);
} dragExited(event: CdkDragExit) {
console.log(`drag:把 '${event.item.data}' 从 '${event.container.id}' 中拖出 `);
} dropListEntered(event: CdkDragEnter) {
console.log(`drop:'${event.container.id}' 中拖进了 '${event.item.data}'`);
} dropListExited(event: CdkDragExit) {
console.log(`drop:从 '${event.container.id}' 中拖出 '${event.item.data}'`);
}
执行如下操作
打印结果:
再執行如下操作:
打印结果:
cdkDropListSorted
拖拽过程中交换item的时候回调
<div class="box-list" cdkDropList #activeList="cdkDropList" id="Active Customers"
[cdkDropListData]="activeCustomers" [cdkDropListConnectedTo]="[inactiveList]"
(cdkDropListDropped)="drop1($event)"
(cdkDropListSorted)="dropListSorted($event)">
<div class="drag-box dragList"
[cdkDragData]="customer"
*ngFor="let customer of activeCustomers"
cdkDrag>
{{customer.name}}
</div>
</div>
ts:
dropListSorted(event: CdkDropList) {
console.log('Sorted:', event);
}
2.9 属性
cdkDropListEnterPredicate
enterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean
指定哪些item是可以拖拽到当前容器
html:
<div class="box-list" cdkDropList #activeList="cdkDropList" id="Active Customers"
[cdkDropListData]="activeCustomers" [cdkDropListConnectedTo]="[inactiveList]"
(cdkDropListDropped)="drop1($event)" [cdkDropListEnterPredicate]="predicate">
<div class="drag-box dragList"
[cdkDragData]="customer"
*ngFor="let customer of activeCustomers"
cdkDrag>
{{customer.name}}
</div>
</div>
ts:
import { ...CdkDrag, CdkDropList } from '@angular/cdk/drag-drop'; predicate(drag: CdkDrag, drop: CdkDropList) {
console.log('predicate:', drag, drop);
return drag.data.age >= 18;
}
CdkDrag属性:
CdkDropList属性
代码:
html:
<div class="drag-box" cdkDrag>
drag me
</div> <h3>锁定方向</h3>
<div class="drag-box" cdkDragLockAxis="y" cdkDrag>
only up/down
</div>
<div class="drag-box" cdkDragLockAxis="x" cdkDrag>
only left/right
</div> <h3>事件监听</h3>
<div cdkDrag class="drag-box"
(cdkDragStarted)="dragStarted($event)"
(cdkDragEnded)="dragEnded($event)"
(cdkDragMoved)="dragMoved($event)"
>
drag me
</div>
<p>{{state}} {{position}}</p> <h3>拖拽handler</h3>
<div class="drag-box-with-handler drag-box" cdkDrag>
<div class="box-handler" cdkDragHandle>
点我拖拽
</div>
</div> <h3>列表排序</h3>
<div class="box-list" cdkDropList (cdkDropListDropped)="drop($event)">
<div class="drag-box dragList" *ngFor="let customer of customers" cdkDrag>
{{customer.name}}
</div>
</div> <h3>横向排序</h3>
<div class="box-list-horizontal" cdkDropList cdkDropListOrientation="horizontal"
(cdkDropListDropped)="drop($event)">
<div class="drag-box dragListH" *ngFor="let customer of customers" cdkDrag>
{{customer.name}}
</div>
</div> <h3>placeholder 默认占位符元素</h3>
<div>使用.cdk-drag-placeholder来显示占位符元素,而不是实际的元素,
因为它是在cdkDropList中拖动的。默认情况下,占位符元素看起来与正在排序的元素完全相同。</div>
<div class="box-list defplaceh" cdkDropList (cdkDropListDropped)="drop($event)">
<div class="drag-box dragList" *ngFor="let customer of customers" cdkDrag>
{{customer.name}}
</div>
</div> <h3>placeholder 自定义占位符元素</h3>
<div>使用*cdkDragPlaceholder指令,我们可以用一个自定义的占位符来代替默认的占位符</div>
<div class="box-list customph" cdkDropList (cdkDropListDropped)="drop($event)">
<div class="drag-box dragList" *ngFor="let customer of customers" cdkDrag >
<div class="box-custom-placeholder" *cdkDragPlaceholder></div>
{{customer.name}}
</div>
</div> <h3>预览 Preview</h3>
<div>当提取并拖动cdkDrag元素时,可以看到预览元素。默认情况下,
预览元素看起来与被拖动的元素完全相同。</div>
<div cdkDropList class="box-list" (cdkDropListDropped)="drop($event)">
<div class="drag-box dragList" *ngFor="let customer of customers" cdkDrag>
{{customer.name}}
<p *cdkDragPreview>Age: {{customer.age}}</p>
</div>
</div> <h3>两个列表间拖放</h3>
<div class="twoList">
<div class="box-list" cdkDropList #inactiveList="cdkDropList" id = "Inactive Customers"
[cdkDropListData]="inactiveCustomers" [cdkDropListConnectedTo]="[activeList]"
(cdkDropListDropped)="drop1($event)"
(cdkDropListEntered)="dropListEntered($event)" (cdkDropListExited)="dropListExited($event)"
[cdkDropListEnterPredicate]="predicate"
>
<div class="drag-box dragList" [cdkDragData]="customer"
(cdkDragEntered)="dragEntered($event)" (cdkDragExited)="dragExited($event)"
*ngFor="let customer of inactiveCustomers;isLast as last"
cdkDrag>
{{customer.name}}
</div>
</div>
<div class="box-list" cdkDropList #activeList="cdkDropList" id = "Active Customers"
[cdkDropListData]="activeCustomers" [cdkDropListConnectedTo]="[inactiveList]"
(cdkDropListDropped)="drop1($event)" [cdkDropListEnterPredicate]="predicate"
(cdkDropListSorted)="dropListSorted($event)"
>
<div
class="drag-box dragList"
[cdkDragData]="customer"
*ngFor="let customer of activeCustomers"
cdkDrag>
{{customer.name}}
</div>
</div>
</div> <!-- <h3>两个列表间拖放 cdkDropListGroup</h3>
<div class="twoList" cdkDropListGroup>
<div class="box-list" cdkDropList id = "Inactive Customers"
[cdkDropListData]="inactiveCustomers"
(cdkDropListDropped)="drop1($event)">
<div class="drag-box dragList" [cdkDragData]="customer"
*ngFor="let customer of inactiveCustomers" cdkDrag>
{{customer.name}}
</div>
</div>
<div class="box-list" cdkDropList id = "Active Customers"
[cdkDropListData]="activeCustomers"
(cdkDropListDropped)="drop1($event)">
<div
class="drag-box dragList"
[cdkDragData]="customer"
*ngFor="let customer of activeCustomers"
cdkDrag>
{{customer.name}}
</div>
</div>
</div> -->
ts:
import { Component, OnInit } from '@angular/core';
import { CdkDragEnd, CdkDragStart, CdkDragMove,
CdkDragDrop, CdkDragEnter, CdkDragExit, moveItemInArray,
transferArrayItem, CdkDrag, CdkDropList } from '@angular/cdk/drag-drop'; @Component({
selector: 'app-drag-drop',
templateUrl: './drag-drop.component.html',
styleUrls: ['./drag-drop.component.scss']
})
export class DragDropComponent implements OnInit {
state = '';
position = '';
customers = [
{ name: 'Adam', age: 23 },
{ name: 'Jack', age: 27 },
{ name: 'Katherin', age: 26 },
{ name: 'John', age: 30 },
{ name: 'Watson', age: 42 },
];
inactiveCustomers = [
{name: 'Jack', age: 18},
{name: 'Katherin', age: 16},
{name: 'Adam', age: 36}
]; activeCustomers = [
{name: 'John', age: 10},
{name: 'Watson', age: 24}
]; constructor() { } ngOnInit() {
} dragStarted(event: CdkDragStart) {
this.state = '拖拽开始';
console.log('拖拽开始');
} dragEnded(event: CdkDragEnd) {
this.state = '拖拽结束';
console.log('拖拽结束');
} dragMoved(event: CdkDragMove) {
console.log('dragMoved');
this.position = `> Position X: ${event.pointerPosition.x} - Y: ${event.pointerPosition.y}`;
} dragEntered(event: CdkDragEnter) {
console.log(`drag:把 '${event.item.data}' 拖进 '${event.container.id}' `);
} dragExited(event: CdkDragExit) {
console.log(`drag:把 '${event.item.data}' 从 '${event.container.id}' 中拖出 `);
} dropListEntered(event: CdkDragEnter) {
console.log(`drop:'${event.container.id}' 中拖进了 '${event.item.data}'`);
} dropListExited(event: CdkDragExit) {
console.log(`drop:从 '${event.container.id}' 中拖出 '${event.item.data}'`);
} drop(event: CdkDragDrop<string[]>) {
console.log('列表排序:', event, this.customers);
moveItemInArray(this.customers, event.previousIndex, event.currentIndex);
} drop1(event: CdkDragDrop<string[]>) {
console.log('拖拽事件:event', event);
if (event.previousContainer === event.container) {
console.log('拖拽事件',
`> 拖 '${event.item.data}' 到 '${event.container.id}'`);
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
console.log('拖拽事件',
`> 拖 '${event.item.data}' 到 '${event.container.id}'`);
transferArrayItem(
event.previousContainer.data, event.container.data,
event.previousIndex, event.currentIndex);
}
} predicate(drag: CdkDrag, drop: CdkDropList) {
console.log('predicate:', drag, drop);
return drag.data.age >= 18;
} dropListSorted(event: CdkDropList) {
console.log('Sorted:', event);
} }
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { MatCardModule } from '@angular/material';
import { DragDropModule } from '@angular/cdk/drag-drop';
// import { VIEWPORT_RULER_PROVIDER } from '@angular/cdk/scrolling';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';
import { DragDropComponent } from './drag-drop/drag-drop.component'; @NgModule({
declarations: [
AppComponent,
VirtualScrollComponent,
DragDropComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ScrollingModule,
MatCardModule,
DragDropModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
css:
.drag-box{
height: 100px;
width: 100px;
border: 1px solid #000;
}
.box-handler{
width: 100%;
height: 20px;
background: #ccc;
}
.dragList{
height: 28px;
margin: 5px 0;
}
.dragListH{
display: inline-block;
margin: 0 5px;
height: 28px;
width: 55px;
}
// 动画效果
// .cdk-drag {
// transition: transform 100ms ease;
// } .cdk-drag-animating {
transition: transform 300ms ease;
}
// 占位符 默认 placeholder
.defplaceh .cdk-drag-placeholder {
background: #ccc;
border: dotted 1px #999;
transition: transform 500ms ease;
} // 自定义占位符
.customph{
.box-custom-placeholder {
height: 28px;
width: 100px;
background: #fff;
border: dotted 1px #0084ff;
transition: transform 200ms ease;
} &.box-list.cdk-drop-list-dragging .drag-box:not(.cdk-drag-placeholder) {
transition: transform 500ms ease;
}
} // 预览
.cdk-drag-preview {
height: 28px;
width: 100px;
box-shadow: 0 3px 3px -3px #0084ff;
} .twoList{
overflow: hidden;
>div{
float: left;
margin: 10px;
}
}
Angular7 Drag and Drop的更多相关文章
- HTML5 之拖放(drag与drop)
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...
- 通过HTML5的Drag and Drop生成拓扑图片Base64信息
HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过 ...
- 基于HTML5的Drag and Drop生成图片Base64信息
HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...
- Android 用户界面---拖放(Drag and Drop)(三)
设计拖放操作 本节主要内容如下: 1. 如何开始拖拽: 2. 在拖拽期间如何响应事件: 3. 如何响应落下事件: 4. 如何结束拖放操作. 开始拖拽 用户使用一个拖拽手势开始拖拽,通常是在 ...
- Android 用户界面---拖放(Drag and Drop)(二)
拖拽事件监听器和回调方法 View对象既可以用实现View.OnDragListener接口的拖放事件监听器,也可以用View对象的onDragEvent(DragEvent)回调方法来接收拖拽事 ...
- Android 用户界面---拖放(Drag and Drop)(一)
用Android的拖放框架,能够允许用户使用图形化的拖放手势,把数据从当前布局中的一个View对象中移到另一个View对象中.这个框架包括:拖拽事件类.拖拽监听器.以及辅助的方法和类. 尽管这个框架主 ...
- 20 Best Drag and Drop jQuery Plugins--reference
reference from:http://dizyne.net/20-best-drag-drop-jquery-plugins/ jQuery has done a great job repla ...
- [Javascript + rxjs] Simple drag and drop with Observables
Armed with the map and concatAll functions, we can create fairly complex interactions in a simple wa ...
- HTML 5 drag and drop 简介
Html 5 drag and drop 简介 HTML5提供了专门拖拽和拖放的API draggable属性 启用拖拽 draggable属性是否可被拖拽, 可选值: true, false, au ...
随机推荐
- [JS深入学习]——数组对象排序
(转) JavaScript实现多维数组.对象数组排序,其实用的就是原生的sort()方法,用于对数组的元素进行排序. sort() 方法用于对数组的元素进行排序.语法如下: arrayObject. ...
- 【LeetCode】 617. 合并二叉树
题目 给定两个二叉树,想象当你将它们中的一个覆盖到另一个上时,两个二叉树的一些节点便会重叠. 你需要将他们合并为一个新的二叉树.合并的规则是如果两个节点重叠,那么将他们的值相加作为节点合并后的新值,否 ...
- HBase Cli相关操作
修改HBase表结构之前首先需要disable表,然后进行更改相关表结构信息,最后enable表,如下 1. 动态添加一个或多个列簇 hbase(main):034:0> describe 'H ...
- TCP与UDP的差别以及TCP三次握手、四次挥手
UDP: 1.UDP面向报文,无需建立连接,不可靠,数量小,高层就解决差错重传,无需拥塞控制 2.支持音频.视频传输 3.检查和检验UDP包头和数据和伪首部 4.分组开销小(头部8个字节),提供最大努 ...
- 安卓7.0拍照遇到 Uri暴露错误
最近,项目又做到,调用摄像头拍照获取图片这个功能. 用以前的代码直接用,发现在Android7.0上使用时会出现问题. Android6.0之后,动态申请权限已成常态. 调用摄像头拍照获取图片这个功能 ...
- 微信小程序开发-概述
微信小程序开发-概述 一.小程序申请&APPID 登录微信平台申请成为小程序开发者,小程序不可直接使用服务号或订阅号的AppID,需要登录微信公众平台管理后台,在网站的"设置&quo ...
- arm处理器启动流程分析
2440: 启动方式:nor , nand 地址布局: 启动流程: 开发板在上电后,会从0x0地址处运行. 如果从nor flash启动,则代码要放在nor 的0地址处: 如果从nand flash启 ...
- C51单片机中data、idata、xdata、pdata的区别
C51单片机中data.idata.xdata.pdata的区别 data: 固定指前面0x00-0x7f的128个RAM,可以用acc直接读写的,速度最快,生成的代码也最小. idata: 固定指前 ...
- GBDT分类和回归例子
- elasticsearch插件安装之--linux下安装及head插件
/** * 系统环境: vm12 下的centos 7.2 * 当前安装版本: elasticsearch-2.4.0.tar.gz */ 安装和学习可参照官方文档: 1, 安装 # 下载, 获取不成 ...