angular2 core4.X 使用页面拖拽插件

 

angular2-draggable  1.3.2插件使用

        使用参数说明：

          zIndexMoving="层次度  相当于z-index"   

         movingOffset=插件独有  div拖拽事件           

          Draggable 是否拖动

          PreventDefaultEvent事件  停止当前dom动作

          trackPosition  false  与positon依赖同步  true  半同步（位置出现变化  实际值与理想值不符）

          position 初始位置属性  x y z

        1.安装插件

npm install angular2-draggable@1.3.2 --save

        2.在module.ts文件中注入说明

   import { AngularDraggableModule } from 'angular2-draggable';
imports: [
    ...,
    AngularDraggableModule
  ],

3.在html中调用   调用dome必须为absolue ,否则拖拽后的位置与理想位置不相符

<div style="position: absolute;" ngDraggable [trackPosition]="false" [preventDefaultEvent]="true"

[position]="坐标参数" (movingOffset)="onMoving(positionF,5)" (mouseup)="mouseup(坐标参数，坐标系位数)">

</div>

 

例子：

1.执行上述步骤

2.

<div style="position: absolute;" ngDraggable [trackPosition]="false" [preventDefaultEvent]="true" [position]="positionA"

(movingOffset)="onMoving(positionA,0)" (mouseup)="mouseup(positionA,0)">

<h2>div1</h2></div>

 

<div style="position: absolute;" ngDraggable [trackPosition]="false" [preventDefaultEvent]="true" [position]="positionB"

(movingOffset)="onMoving(positionB,1)" (mouseup)="mouseup(positionB,1)">

<h2>div2</h2></div>

ts

positionA = { x: 20, y: 0, z: -1 };

positionB = { x: 460, y: 0, z: -1 };

position = [{ x: 20, y: 0, z: -1 },{ x: 460, y: 0, z: -1 }]

//拖拽div坐标1

drop = "";

positionDrop = { x: 0, y: 0, z: -1 };

//拖拽div坐标2

positionDrag = { x: 0, y: 0, z: -1 };

drag = "";

//重新定位

Refreshposition() {

this.position.forEach(element => {

if (this.positionnum == 0) {

this.positionA = element;

}

if (this.positionnum == 1) {

this.positionB = element;

}

if (this.positionnum == 2) {

this.positionC = element;

}

if (this.positionnum == 3) {

this.positionD = element;

}

if (this.positionnum == 4) {

this.positionE = element;

}

if (this.positionnum == 5) {

this.positionF = element;

}

if (this.positionnum == 6) {

this.positionG = element;

}

this.positionnum++;

});

this.positionnum = 0;

}

//拖拽鼠标松开，进行换位

mouseup(event, num) {

if(!this.isDropAndDrag){

return;

}

this.positionDrag = event;

this.drag = num;

debugger

if (this.positionDrop == event && num == this.drop) {

return;//原地 不换位

}

if(!this.isDropAndDrag ){

//换完位后，清空中间缓存值

this.drop="";

this.drag="";

this.positionDrag=={ x: 0, y: 0, z: -1 };

return;

}

if( this.drop.length<1 ){

//换完位后，清空中间缓存值

this.drop="";

this.drag="";

let drop1: number = +this.drop;

let drag1: number = +this.drag;

this.position[this.drag] = this.positionDrop;

this.position[this.drop] = this.positionDrag;

this.Refreshposition();

//换完位后，清空中间缓存值

this.drop="";

this.drag="";

}

//拖拽目标，进行预存

onMoving(event, num) {

this.positionDrop = event;

this.drop = num;

}