角cdk拖动和拖放拖动后元素的执行位置

时间:2019-10-16 08:09:57

标签: drag-and-drop angular8 cdk

经历了很长一段时间的苦难之后,我找到了解决方法。我使用dragMoved事件删除了它们的transform属性,并使用事件距离添加了我的事件。见波纹管

  dragMoved(event) {
    const element = event.source.getRootElement();
    console.log(event.distance, 'cdk');
    element.style.removeProperty('transform');
    element.style.transform = `translate3d(${event.distance.x}px,${event.distance.y}px,0)`;
  }

在onDragEnded事件发生之后,我从转换中获得了x和y属性,并将其添加到当前的x和y中以获取突出位置,然后在之后删除了transfor,请参见波纹管

 onDragEnded(event, className, i?) {
const element = event.source.getRootElement();
const transform = element.style.getPropertyValue('transform');
const x = transform.split('(')[1].split(')')[0].split(',')[0];
const y = transform.split('(')[1].split(')')[0].split(',')[1];

this.offers.controls[e.index].get('top').setValue(y + top + 'px');
this.offers.controls[e.index].get('left').setValue(x + left + 'px');
element.style.transform = 'translate3d(0,0,0)';
}

0 个答案:

没有答案