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);
  }

}

我也解决了当化身被移动但上面的代码片段移动聊天窗口的问题。

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

如何将三个div一起使用，拖动开始，拖动开始，单击，鼠标上移，鼠标下移，并使其全部分开但相等

1 个答案: