模拟聊天窗口 拖拽
Posted lyt598
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模拟聊天窗口 拖拽相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body,#wrapper{height: 100%;width: 100%;}
/*html{font-size: 100px;}*/
body{
font-size: 14px;
display: flex;
}
*{
box-sizing: border-box;
margin: 0;padding: 0;
}
ul,li{list-style: none;}
#chat{
display: flex;
flex-direction: column;
width: 566px;
height: 507px;
background: #F5F5F5;
box-shadow: 0px 0px 1px 0px #D9D9D9;
position: absolute;
left: 0;
top: 0;
}
#chatTop,#chatBottom{padding: 20px;}
#chatTop{
min-height: 360px;
overflow-y: auto;
}
/*滚动条样式*/
#chatTop::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
#chatTop::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
height: 10px;
}
#chatTop::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
.chatTitle{height: 30px;}
.chatContent{
min-height: 30px;
width: 298px;
word-wrap: break-word;
}
#chatBottom{
height: 147px;
border-top: 1px solid #ECECEC;
background: #fff;
}
.divSend{
text-align: right;
}
.btnSend{
width: 70px;
height: 25px;
padding: 2px 10px;
background: #F5F5F5;
color: #606060;
border: 1px solid #E5E5E5;
outline: none;
}
.btnSend:hover{
background: #129611;
color: #fff;
}
#describe{
height: 81px;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="chat">
<div id="chatTop" class="">
<ul>
<li class="">
<div class="chatTitle">
<span class="chatRank">【群主】</span>
<span class="chatAddr">【北京】</span>
<span class="chatName">昵称</span>
<span class="chatTime">08:06:06</span>
</div>
<div class="chatContent">早上好小火把</div>
</li>
<li class="">
<div class="chatTitle">
<span class="chatRank">【群主】</span>
<span class="chatAddr">【北京】</span>
<span class="chatName">昵称</span>
<span class="chatTime">08:06:06</span>
</div>
<div class="chatContent">早上好小火把</div>
</li>
<li class="">
<div class="chatTitle">
<span class="chatRank">【群主】</span>
<span class="chatAddr">【北京】</span>
<span class="chatName">昵称</span>
<span class="chatTime">08:06:06</span>
</div>
<div class="chatContent">早上好小火把</div>
</li>
<li class="">
<div>
<div class="chatTitle">
<span class="chatRank">【群主】</span>
<span class="chatAddr">【北京】</span>
<span class="chatName">昵称</span>
<span class="chatTime">08:06:06</span>
</div>
<div class="chatContent">早上好小火把</div>
</div>
</li>
</ul>
</div>
<div id="chatBottom">
<div class="describe">
<div id="describe" contentEditable=‘true‘></div>
</div>
<div class="divSend">
<button class="btnSend">发送(S)</button>
</div>
</div>
</div>
<script src="jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(‘#chat .describe,#chatTop li div‘).mousedown(function(e) {
e.stopPropagation();///不再派发事件
})
$(‘#chat‘).mousedown(function(e) {
var positionDiv = $(this).offset();
var distenceX = e.pageX - positionDiv.left;
var distenceY = e.pageY - positionDiv.top;
$(document).mousemove(function(e) {
var x = e.pageX - distenceX;
var y = e.pageY - distenceY;
if (x < 0) {
x = 0;
} else if (x > $(document).width() - $(‘#chat‘).outerWidth(true)) {
x = $(document).width() - $(‘#chat‘).outerWidth(true);
}
if (y < 0) {
y = 0;
} else if (y > $(document).height() - $(‘#chat‘).outerHeight(true)) {
y = $(document).height() - $(‘#chat‘).outerHeight(true);
}
$(‘#chat‘).css({
‘left‘: x + ‘px‘,
‘top‘: y + ‘px‘
});
});
$(document).mouseup(function() {
$(document).off(‘mousemove‘);
});
});
$(".btnSend").click(function(){
sendFun();
})
$(‘.describe‘).bind(‘keyup‘, function(event) {//回车后 执行
if (event.keyCode == "13") {
//回车执行查询
sendFun();
}
});
function sendFun(){
var chatBottomContent=$("#describe").html();
if(chatBottomContent){
var html=`
<li class="">
<div>
<div class="chatTitle">
<span class="chatRank">【群主】</span>
<span class="chatAddr">【北京】</span>
<span class="chatName">昵称</span>
<span class="chatTime">08:06:06</span>
</div>
<div class="chatContent">${chatBottomContent}</div>
</div>
</li>
`;
$("#chatTop ul").append(html);
$("#describe").html("");
}
}
</script>
</body>
</html>
以上是关于模拟聊天窗口 拖拽的主要内容，如果未能解决你的问题，请参考以下文章