diff --git a/public/react/src/modules/courses/ordering/Ordering.js b/public/react/src/modules/courses/ordering/Ordering.js index 54cebac7f..504db9e18 100644 --- a/public/react/src/modules/courses/ordering/Ordering.js +++ b/public/react/src/modules/courses/ordering/Ordering.js @@ -22,7 +22,9 @@ class Ordering extends Component{ this.state={ isSpin:false, antIcon:false, - datas:undefined + datas:undefined, + windowsscrollTop:false, + windowsscrollTopsum:0 } } @@ -49,7 +51,43 @@ class Ordering extends Component{ isSpin:false }) }) + + window.addEventListener('scroll', this.handleScroll.bind(this)) //监听滚动 + // window.addEventListener('resize', this.handleResize.bind(this)) //监听窗口大小改变 + } + + + // componentWillUnmount() { //一定要最后移除监听器,以防多个组件之间导致this的指向紊乱 + // window.removeEventListener('scroll', this.handleScroll.bind(this)) + // window.removeEventListener('resize', this.handleResize.bind(this)) + // } + + handleScroll=(e)=>{ + // console.log( + // '浏览器滚动事件', + // e.srcElement.scrollingElement.scrollTop, + // e.srcElement.scrollingElement.scrollHeight + // ) + //e.srcElement.scrollingElement.scrollTop为距离滚动条顶部高度 + // e.srcElement.scrollingElement.scrollHeight为整个文档高度 + + if(e.srcElement.scrollingElement.scrollTop>60){ + this.setState({ + windowsscrollTop:true, + windowsscrollTopsum:e.srcElement.scrollingElement.scrollTop + }) + } + + if(e.srcElement.scrollingElement.scrollTop===0){ + this.setState({ + windowsscrollTop:false + }) + } } + // + // handleResize = e => { + // console.log('浏览器窗口大小改变事件', e.target.innerWidth) + // } @@ -112,16 +150,28 @@ class Ordering extends Component{ } + render(){ let { datas, Modalstype, + windowsscrollTop, + windowsscrollTopsum }=this.state; let main_id=this.props.match.params.main_id; let category_id=this.props.match.params.category_id; console.log(this.props) + console.log(window) + + let positiontype=null; + + if(windowsscrollTop===true){ + positiontype={position:'fixed',zIndex:'9000',left:'20%',top: '0px'} + }else{ + positiontype={} + } return(
+
温馨提示:请在列表中长按鼠标左键,进行拖放排序。完成排序后请点击“保存” - -
@@ -170,6 +219,7 @@ class Ordering extends Component{ ref={provided.innerRef} {...provided.droppableProps} className={"educontent mb50 mt40 droppableul"} + onScroll={this.contentViewScrolledit} > {datas===undefined?"": datas.map((item, index) => {