如何将三个div一起使用，dragstart，dragend，click，mouseup，mousedown并保持它们分开但相等

Question

好的，我正在旋转我的轮子：

我的困惑是：

这是我的 HTML:

<!-- PARENT OUTER WRAPPER -->
<div id="avatarmoveable" class="moveablecontainer avatarBubble"
     title="Click on an HOLD to drag avatar"
     (click)="avatarMoveClick($event,'moveavatar')"
     ngDraggable>
  <!-- OUTER WRAPPER -->
  <div class="avatarsays box-opener">
    <!-- DEBUG CONSOLE OUTER WRAPPER -->
    <div class="debugcontainer"
         title="Click to OPEN DEBUG Console or say, 'OPEN DEBUG CONSOLE'."
         *ngIf="isVisible"
         (click)="showHideCSMModal($event, 'debugconsole')">
      <img id="debugavatar" class="avatarimg avatar img-circle" src="../../../assets/images/avatar/avatar_l.svg">
    </div>
    <!-- END DEBUG OUTER WRAPPER -->

    <!-- ICONS OUTER WRAPPER -->
    <div id="iconscont" class="iconscontainer">
      <!-- MICROPHONE ICON -->
      <a class="avataricons talk" href="javascript:;"
         (click)="handleClick($event,'miconoff')"
         (condition)="micon" title="Click the Mic ON or OFF!">
        <i id="mic" [ngClass]="micon ? 'fa fa-microphone iconactive' : 'fa fa-microphone-slash iconactive'"></i>
      </a>
      &nbsp;
      <!-- SPEARKER ICON -->
      <a class="avataricons listen" href="javascript:;"
         (click)="handleClick($event,'spkronoff')"
         (condition)="spkron" title="Click the Speaker ON or OFF!">
        <i id="spkr" [ngClass]="spkron ? 'fa fa-volume-up iconactive' : 'fa fa-volume-off iconactive'"></i>
      </a>
    </div>
    <!-- END ICONS OUTER WRAPPER -->

  </div>
  <!-- END OUTER WRAPPER -->
</div>
<!-- END PARENT OUTER WRAPPER -->

这是我要实现的目标：

当您点击并拖动外包装时，化身和里面的所有东西都会被拖动。（这是有效的，不是问题）
当您 "CLICK" 在图像上（在 PARENT OUTER WRAPPER 内部）时，会弹出一个模式（这是有效的，不是问题）
当您只 "CLICK" 在 MIC 或 SPEAKER 图标上时，它们 disabled/enable（这也没有问题）
让它们在互不干扰的情况下正常工作！

问题：

我想将“点击”、“开始拖放”、“拖放”、“拖放”分开，这样当我点击并拖动时，模式将无法打开...这就是我现在面临的问题。

这是我的删节 .ts 代码：

注意：我使用的是 ngDraggable，它真的很酷。

...

变量定义：

public avatarBUBBLE: HTMLElement; //OUTER MOST PARENT DIV
public debugCONSOLE: HTMLElement; //DEBUG CONSOLE
public micICON: HTMLElement; //MICROPHONE ICON
public spkrICON: HTMLElement; //SPEAKER ICON

...

现在，元素：

ngOnInit() {

    //TYPE ERROR CHECK
    this.**typeErrorCheck**();
    this.avatarBUBBLE = document.querySelector("#avatarmoveable") as HTMLElement;
    this.debugCONSOLE = document.querySelector("#debugavatar") as HTMLElement;
    this.micICON = document.querySelector(".talk") as HTMLElement;
    this.spkrICON = document.querySelector(".listen") as HTMLElement;

}

...

ngAfterViewInit() { 


    this.avatarBUBBLE = document.querySelector("#avatarmoveable") as HTMLElement;
    this.debugCONSOLE = document.querySelector("#debugavatar") as HTMLElement;
    this.micICON = document.querySelector(".talk") as HTMLElement;
    this.spkrICON = document.querySelector(".listen") as HTMLElement;

}

...

我的活动：

onClick(event: any) {
  event.preventDefault();
  console.log("ON CLICK: ", event);
  if (event) {
    console.log("CLICK: event.target.id: ", event.currentTarget.id);

    return true;
  } else {
    return false;
  }
}

onMouseDown(event: any) {
  event.preventDefault();

  console.log("ON MOUSE Down: ", event);
  if (event) {
    console.log("MOUSEDOWN: event.target.id: ", event.target.id);
    return true;
  } else {
    return false;
  }
}

onMouseUp(event: any) {
  event.preventDefault();

  console.log("ON MOUSE UP: ", event);
  if (event) {
    console.log("MOUSEUP: event.target.id: ", event.target.id);
    return true;
  } else {
    return false;
  }
}

onDragStart(event: any) {
  console.log("ON DRAG START: ", event);
  if (event) {
    console.log("DRAGSTART: event.target.id: ", event.currentTarget.id);
    this.avatarMoveClick(event, 'moveavatar');
    return true;
  } else {
    return false;
  }
}

onDragEnd(event: any) {
  console.log("ON DRAG END: ", event);
  if (event) {
    console.log("DRAGEND: event.target.id: ", event.currentTarget.id);
    this.avatarMoveClick(event, 'moveavatar');
    return true;
  } else {
    return false;
  }
}

onDragDrop(event: any) {
  console.log("ON DRAG END: ", event);
  if (event) {
    console.log("DRAGDROP: event.target.id: ", event.currentTarget.id);
    this.avatarMoveClick(event, 'moveavatar');
    return true;
  } else {
    return false;
  }
}

**typeErrorCheck**() {  //Called in ngOnInit

  this.timer = window.setTimeout(() => {

    this.avatarBUBBLE.addEventListener('dragstart', this.onDragStart.bind(this.avatarBUBBLE));
    this.avatarBUBBLE.addEventListener('dragend', this.onDragEnd.bind(this.avatarBUBBLE));
    this.avatarBUBBLE.addEventListener('dragdrop', this.onDragDrop.bind(this.avatarBUBBLE));

    this.debugCONSOLE.addEventListener('mouseup', this.onMouseUp.bind(this.debugCONSOLE));
    this.micICON.addEventListener('mousedown', this.onMouseDown.bind(this.micICON));
    this.spkrICON.addEventListener('mousedown', this.onMouseDown.bind(this.spkrICON));

  }, 8000);

}

参考资料：

a) 我原来的问题： which I believe I'm nearly answered with this: http://jsfiddle.net/2EqA3/3/

b) 使用本题要素： D3 Differentiate between click and drag for an element which has a drag behavior

Answer 1

我能够使用 ngDraggable 的功能来获取我想要的信息，然后很容易地更改 translate(x,y)。

在我放置 ngDraggable 的地方，将其添加到 HTML

上的可拖动元素中

 (click)="draggable = !draggable"
 (started)="onStart($event)"
 (stopped)="onStop($event)"
 (movingOffset)="onMoving($event,'chatbot')"
 (endOffset)="onMoveEnd($event,'chatbot')"
 [preventDefaultEvent]="true"
 [style.transform]="!transformXY ? css.moveableWrapper.transform.org : css.moveableWrapper.transform.new"

这是 .ts 文件

private calcChatBotPos(trans: string) {

console.log("TRANSFORM: " + trans);

let re = /[^0-9\-.,]/g;
let matrix = trans.replace(re, '').split(',');
let x = matrix[0];
let y = matrix[1];

console.log("xTrans: " + x + "px");
console.log("yTrans: " + y + "px");

//The xy distant is 15, 10 respectively

  if (this.xposEndAvatarOffset !== '' && this.yposEndAvatarOffset !== '') {
  //Set to FALSE
  this.transformXY = false;
  this.css.moveableWrapper.transform.newxy = "translate(" + x + "px" + ", " + y + "px)";
  console.log("Inside IF...." + "translate(" + x + "px" + ", " + y + "px)");
  //Set the CHATBOT to it's NEW position
  this.theMoveable1.style.transform = this.css.moveableWrapper.transform.newxy;
  } else {
  //reset to TRUE
  this.transformXY = true;
  this.css.moveableWrapper.transform.orgxy = "translate(0px, 0px)";
  console.log("Inside ELSE...." + this.css.moveableWrapper.transform.orgxy);
  //Set the CHATBOT to it's ORG position
  this.theMoveable1.style.transform = this.css.moveableWrapper.transform.orgxy;
}

}

这是 ngDraggable 的 link。单击 HTML 以查看我在何处获得选项：https://xieziyu.github.io/angular2-draggable/#/draggable/usage/options

这是从 ngDraggable

获取事件的代码

//ngDraggable stuff
onStart(event) {
  console.log('started output:', event);
}

onStop(event) {
  console.log('stopped output:', event);
}

onMoving(event, fromwhere) {

if (fromwhere === "chatbot") {
  this.movingOffset.x = event.x;
  this.movingOffset.y = event.y;
  this.xposChatbot = this.movingOffset.x;
  this.yposChatbot = this.movingOffset.y;

  console.log("CHATBOT movingoffset x and y: " + this.xposChatbot + " : " + this.yposChatbot);
}
if (fromwhere === "avatar") {
  this.movingOffset.x = event.x;
  this.movingOffset.y = event.y;
  this.xposAvatar = this.movingOffset.x;
  this.yposAvatar = this.movingOffset.y;

  console.log("AVATAR movingoffset x and y: " + this.xposAvatar + " : " + this.xposAvatar);
  }

}

onMoveEnd(event, fromwhere) {

if (fromwhere === "chatbot") {

  this.endOffset.x = event.x;
  this.endOffset.y = event.y;
  this.xposEndChatOffset = this.endOffset.x;
  this.yposEndChatOffset = this.endOffset.y;

  console.log("CHATBOT endoffset x and y: " + this.xposEndChatOffset + " : " + this.yposEndChatOffset);

  }
  if (fromwhere === "avatar") {

  this.endOffset.x = event.x;
  this.endOffset.y = event.y;
  this.xposEndAvatarOffset = this.endOffset.x;
  this.yposEndAvatarOffset = this.endOffset.y;

  console.log("AVATAR endoffset x and y: " + this.xposEndAvatarOffset + " : " + this.yposEndAvatarOffset);
  this.avatarMoveClick(event, fromwhere);
  }

}

我还解决了移动聊天 window 当头像移动但上面的代码片段时的问题。

很简单，一旦我脑子里的灯熄灭了。

如何将三个div一起使用，dragstart，dragend，click，mouseup，mousedown并保持它们分开但相等

How to use, dragstart, dragend, click, mouseup, mousedown with three divs together and keep them all separate but equal

typescript

onclick

drag-and-drop

mousedown

mouseup