弹窗拖拽优化
This commit is contained in:
@ -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'>
|
||||||
|
@ -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
|
||||||
|
Reference in New Issue
Block a user