2017-01-25 10 views
1

私はそれを持っているので、ユーザーが要素をドラッグしているときに "overflow:auto"に設定されたdiv要素がスクロールします。角度2 window.scrollToは機能しませんか?

要素の動作をドラッグなど(例えば、またX/Y初期ドラッグ(onDragStart時位置)とマウスが移動している現在のX/Y位置として。

Iを適切なマウスデータを取得しませんおそらくオフの私のロジックを実現するが、私はもっとスクロールするdiv要素を取得しようとしているだけです。何が間違っているかについての洞察力は大いに評価されるでしょう...

注:Angular 1をAngling 2のように表示するng-metadataを使用していますが、Angular 1またはAngular 2のガイダンスは参考になります。

@autobind 
onDragStart({clientX, clientY}) { 
    this.initY = clientY; 
    if (this.isDragging) return; 
    document.addEventListener('mousemove', this.dragListener = (e) => { 
    e.preventDefault(); 
    if (Math.max(Math.abs(e.clientX - clientX), Math.abs(e.clientY - clientY)) > 3) { 
    document.removeEventListener('mousemove', this.dragListener); 
    document.addEventListener('mousemove', this.onDrag); 
    this.dragListener = this.onDrag; 
    this.fileService.dragSource = this.file; 
    // onDrag needs to be called before Angular can set the proper classes 
    this._element.toggleClass('dragging', this.isDragging); 
    this._element.toggleClass('bulk-dragging', this.inBulkDragOp); 
    this.onDragScroll(e); 
    this.onDrag(e); 
    this.drag.emit(); 
    this._scope.$applyAsync(); 
    } 
}); 
} 

@autobind 
onDrag(e) { 
    console.log("Dragging..."); 
    console.log(e); 
    var currentY = e.clientY; 
    var range = 100; // Range of 100px before scrolling begins... May need tweaking if too responsive 

if (currentY > this.initY + range) { 
    console.log("SCROLL DOWN"); 
    window.scrollTo(0, 500); 
} else if (currentY < this.initY - range) { 
    console.log("SCROLL UP"); 
} 
e.preventDefault(); 
this._element.css('transform', `translate(${e.clientX - this._element[0].clientWidth/2}px, ${e.clientY - this._element[0].clientHeight/2}px)`); 
} 

答えて

2

コンテナタグの高さを100%に設定していたため、スクロールの機能が損なわれているようでした。それを削除すると問題が解決しました。

関連する問題