弹窗拖拽优化

This commit is contained in:
unknown
2022-05-11 10:09:39 +08:00
parent c453250a31
commit aff350b771
2 changed files with 10 additions and 10 deletions

View File

@ -11,25 +11,25 @@ export default function ChatHeader(props) {
className={style.customer_service_content} className={style.customer_service_content}
id="chatHeader" id="chatHeader"
onMouseOver={(e)=>{ onMouseOver={(e)=>{
if(e.target.id=='chatHeader'){ if(e.target.id=='chatHeader' || e.target.id=='chatHeaderTitle'|| e.target.id=='chatHeaderSologan' || e.target.id=='chatHeaderAvatar'){
mouseOverHandle(e,props.chatUI) mouseOverHandle(e,props.chatUI)
} }
}} }}
onMouseMove={(e)=>{ onMouseMove={(e)=>{
if(e.target.id=='chatHeader'){ if(e.target.id=='chatHeader' || e.target.id=='chatHeaderTitle'|| e.target.id=='chatHeaderSologan'|| e.target.id=='chatHeaderAvatar'){
mouseMoveHandle(e,props.chatUI) mouseMoveHandle(e,props.chatUI)
} }
}} }}
onMouseDown={(e)=>{ onMouseDown={(e)=>{
if(e.target.id=='chatHeader'){ if(e.target.id=='chatHeader' || e.target.id=='chatHeaderTitle'|| e.target.id=='chatHeaderSologan'|| e.target.id=='chatHeaderAvatar'){
mouseDrag(e,150,props.chatUI,null,null) mouseDrag(e,150,props.chatUI,null,null)
} }
}} }}
> >
<span className={style.avatar}></span> <span id="chatHeaderAvatar" className={style.avatar}></span>
<div className={style.desc_area}> <div className={style.desc_area}>
<span className={style.name}>中国联通供应链智慧客服</span> <span id="chatHeaderTitle" className={style.name}>中国联通供应链智慧客服</span>
<span className={style.sologan}>客户至上 产品至上</span> <span id="chatHeaderSologan" className={style.sologan}>客户至上 产品至上</span>
</div> </div>
<div className={style.btn}> <div className={style.btn}>
<Tooltip title="隐藏" placement='bottom'> <Tooltip title="隐藏" placement='bottom'>

View File

@ -149,7 +149,7 @@ export function mouseOverHandle(e,chatUI){
clickBox.style.cursor="auto" clickBox.style.cursor="auto"
} }
}else if(direction == "move"){ }else if(direction == "move"){
clickBox.style.cursor="move" clickBox.style.cursor="auto"
}else{ }else{
clickBox.style.cursor="auto" clickBox.style.cursor="auto"
} }
@ -188,7 +188,7 @@ export function mouseMoveHandle(e,chatUI){
}else if(direction=="top" || direction=="bottom"){ }else if(direction=="top" || direction=="bottom"){
clickBox.style.cursor='s-resize' clickBox.style.cursor='s-resize'
}else if(direction == "move"){ }else if(direction == "move"){
clickBox.style.cursor="move" clickBox.style.cursor="auto"
}else { }else {
clickBox.style.cursor="auto" clickBox.style.cursor="auto"
} }
@ -228,7 +228,7 @@ export function mouseDrag(e,selfHeight,chatUI,changeHeight,setPostion){
direction = 'top'; direction = 'top';
} }
} }
if(clickBox.id=="chatHeader" ){ if(clickBox.id=="chatHeader" || clickBox.id=="chatHeaderAvatar" || clickBox.id=="chatHeaderTitle" || clickBox.id=="chatHeaderSologan"){
e=e||event; //兼容ie和其他浏览器的写法 e=e||event; //兼容ie和其他浏览器的写法
if ((mouseDownY > clickBoxTop && mouseDownY < clickBoxBottom) || (mouseDownX > clickBoxLeft && mouseDownX < clickBoxRight)){ if ((mouseDownY > clickBoxTop && mouseDownY < clickBoxBottom) || (mouseDownX > clickBoxLeft && mouseDownX < clickBoxRight)){
direction = 'move'; direction = 'move';
@ -250,7 +250,7 @@ export function mouseDrag(e,selfHeight,chatUI,changeHeight,setPostion){
if(changeHeight && changeHeight!=undefined) changeHeight(Math.min(record_maxHeight,(topHeight - mouseDownY + yy) < 20 ? 20:(topHeight - mouseDownY + yy))) if(changeHeight && changeHeight!=undefined) changeHeight(Math.min(record_maxHeight,(topHeight - mouseDownY + yy) < 20 ? 20:(topHeight - mouseDownY + yy)))
} }
if (clickBox.id=="chatHeader" && direction==='move'){ if ((clickBox.id=="chatHeader" || clickBox.id=="chatHeaderAvatar" || clickBox.id=="chatHeaderTitle" || clickBox.id=="chatHeaderSologan") && direction==='move'){
var l = xx - mouseDownX + ll var l = xx - mouseDownX + ll
var t = yy - mouseDownY + tt var t = yy - mouseDownY + tt