如何使用，dragstart，dragend，click，mouseup，mousedown与三个div一起保持它们全部分开但相同

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 -->

这是我想要完成的事情：

当您点击并拖动外包装时，头像和内部的所有内容都会拖动。（这是有效的而不是问题）
当您只是“点击”时，在图像上（在PARENT OUTER WRAPPER内部），一个模态弹出打开（这是工作而不是问题）
当您只是“点击”MIC或SPEAKER图标时，它们会被禁用/启用（这也是没有问题的）
让它们全部工作，不与其他任何东西干扰！

问题：

我想将CLICK，DRAGSTART，DRAGDROP，DRAGEND分开，所以当我点击并拖动时，MODAL将不会打开......这就是我现在面临的问题。

这是我删节的.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）我原来的问题：How to keep two divs close together if you move one or the other，我相信我几乎已经回答了这个问题：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上的draggable元素中 (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的链接。单击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); } }
我还解决了移动聊天窗口时移动聊天窗口的问题，但上面的代码片段。

这很简单，一旦我的光线消失在脑海中。

如何使用，dragstart，dragend，click，mouseup，mousedown与三个div一起保持它们全部分开但相同

问题描述投票：0回答：1

1个回答

最新问题

如何使用，dragstart，dragend，click，mouseup，mousedown与三个div一起保持它们全部分开但相同

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1