工具条位置拖拽功能（我的成长之路No.6）

 一，拉动上面蓝色位置可任意拖动工具条位置（蓝色部分为镶嵌的图片img不是背景图片）

1.问题点（a），因为蓝色部分是图片的原因所以在拖动时，图片会进行新窗口打开，需要进行默认事件的阻止操作。

<img src="assets/images/layer/tag.png" draggable="false" />

//draggable="false" 禁止图片拖拽

2.问题点（b），不能直接将拖拽加入到上方蓝色区域，因为处理问题点（a）之后图片已经禁止拖拽。

 

<div class="layers" id="toolbars" draggable="true" (dragend)="onScorllDrag($event)">
        <div class="block" draggable="false" ondragstart="return false">
            <div class="cell moves">
                <img src="assets/images/layer/tag.png" draggable="false" />
            </div>
         </div>
</div>
//draggable="true" 允许最外层盒子进行拖拽 (dragend)="onScorllDrag($event)" 拖拽结束后的回调函数
//draggable="false"  工具栏排列的盒子禁止拖拽 ondragstart="return false" 并阻止图片新窗口打开的默认事件

二、完整前台代码

<div class="layers" id="toolbars" draggable="true" (dragend)="onScorllDrag($event)">
        <div class="block" draggable="false" ondragstart="return false">
            <div class="cell moves">
                <img src="assets/images/layer/tag.png" draggable="false" />
            </div>
            <div class="cell" title="抓手" (click)="onToolClick('hand')" [class.active]="selectedTool === 'hand'">
                <img src="assets/images/layer/icon01-active.png" *ngIf="selectedTool === 'hand'; else defaultIcon01" />
                <ng-template #defaultIcon01>
                    <img src="assets/images/layer/icon01.png" />
                </ng-template>
            </div>
            <div class="cell" title="套索+" (click)="onToolClick('lassoPlus')" [class.active]="selectedTool === 'lassoPlus'">
                <img src="assets/images/layer/icon02-active.png" *ngIf="selectedTool === 'lassoPlus'; else defaultIcon02" />
                <ng-template #defaultIcon02>
                    <img src="assets/images/layer/icon02.png" />
                </ng-template>
            </div>
            <div class="cell" title="套索-" (click)="onToolClick('lassoMinus')" [class.active]="selectedTool === 'lassoMinus'">
                <img src="assets/images/layer/icon03-active.png" *ngIf="selectedTool === 'lassoMinus'; else defaultIcon03" />
                <ng-template #defaultIcon03>
                    <img src="assets/images/layer/icon03.png" />
                </ng-template>
            </div>
            <div class="cell" title="归零" (click)="onToolClick('zero')" [class.active]="selectedTool === 'zero'">
                <img src="assets/images/layer/icon04-active.png" *ngIf="selectedTool === 'zero'; else defaultIcon04" />
                <ng-template #defaultIcon04>
                    <img src="assets/images/layer/icon04.png" />
                </ng-template>
            </div>
            <div class="cell" title="重置" (click)="onToolClick('reset')" [class.active]="selectedTool === 'reset'">
                <img src="assets/images/layer/icon05-active.png" *ngIf="selectedTool === 'reset'; else defaultIcon05" />
                <ng-template #defaultIcon05>
                    <img src="assets/images/layer/icon05.png" />
                </ng-template>
            </div>
            <div class="cell" title="撤销" (click)="onToolClick('undo')" [class.active]="selectedTool === 'undo'">
                <img src="assets/images/layer/icon06-active.png" *ngIf="selectedTool === 'undo'; else defaultIcon06" />
                <ng-template #defaultIcon06>
                    <img src="assets/images/layer/icon06.png" />
                </ng-template>
            </div>
            <div class="cell" title="恢复" (click)="onToolClick('restore')" [class.active]="selectedTool === 'restore'">
                <img src="assets/images/layer/icon07-active.png" *ngIf="selectedTool === 'restore'; else defaultIcon07" />
                <ng-template #defaultIcon07>
                    <img src="assets/images/layer/icon07.png" />
                </ng-template>
            </div>
            <div class="cell" title="保存" (click)="onToolClick('save')" [class.active]="selectedTool === 'save'">
                <img src="assets/images/layer/icon08-active.png" *ngIf="selectedTool === 'save'; else defaultIcon08" />
                <ng-template #defaultIcon08>
                    <img src="assets/images/layer/icon08.png" />
                </ng-template>
            </div>
            <div class="cell" title="上传" (click)="onToolClick('upload')" [class.active]="selectedTool === 'upload'">
                <img src="assets/images/layer/icon09-active.png" *ngIf="selectedTool === 'upload'; else defaultIcon09" />
                <ng-template #defaultIcon09>
                    <img src="assets/images/layer/icon09.png" />
                </ng-template>
            </div>
            <div class="cell" title="刷新" (click)="onToolClick('refresh')" [class.active]="selectedTool === 'refresh'">
                <img src="assets/images/layer/icon10-active.png" *ngIf="selectedTool === 'refresh'; else defaultIcon10" />
                <ng-template #defaultIcon10>
                    <img src="assets/images/layer/icon10.png" />
                </ng-template>
            </div>
        </div>
    </div>

三、后台ts代码（js的需要更改一些，改动不大），网上也有很多，但都不符合我自己的业务需求，但又觉得麻烦所以就自己写了一些，目前功能可以完整实现，无压力。

onScorllDrag(e: any){//拖拽移动工具条
        let _x: any
        let _y: any
        let toolbars: any = document.querySelector('#toolbars')
        _x = e.pageX < 400 ? 400 : e.pageX > (document.body.clientWidth - 50) ? document.body.clientWidth - 50 : e.pageX;
        _y = e.pageY < 10 ? 10 : e.pageY > (document.body.clientHeight - 520) ? document.body.clientHeight - 520 :e.pageY;
        toolbars.style.cssText = `top:${_y}px;left:${_x}px`;
    }
//`top:${_y}px;left:${_x}px`; 模版
//document.querySelector('#toolbars') 根据id获取对应dom元素
//document.body.clientHeight document.body.clientWidt 页面可见宽 页面可见高