<!DOCTYPE html><html> <head> <title></title> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; padding: 0; position: relative ...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
.con {
display: flex;
height: 100%;
}
.Parent-left {
width: 150px;
border-right: 1px solid #000000;
}
.Parent-right {
flex: 1;
}
.Parent-left,
.Parent-right {
height: 100%;
}
.ChildL,
.ChildR {
height: 100%;
}
.parLeCon,
.parRiCon {
height: 100%;
width: 99%;
word-break: break-all;
}
.ChildL:hover {
cursor: w-resize
}
.parLeCon:hover {
cursor: auto
}
</style>
</head>
<body>
<div class="con">
<div class="Parent-left">
<div class="ChildL">
<div class="parLeCon">
<p>asdasdasdasasdasdas</p>
</div>
</div>
</div>
<div class="Parent-right">
<div class="ChildR">
<div class="parRiCon">
<p>asdasdasdasasdasdas</p>
</div>
</div>
</div>
</div>
<script src="js/jquery.1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
var dragable = false //預設不能拖動
var pageX = $(".ChildL").width() //滑鼠拖動的寬度
//滑鼠按下事件
$(".ChildL").bind('mousedown', function(e) {
dragable = true
//滑鼠彈起事件
$(document).bind('mouseup', function(e) {
if (dragable) {
dragable = false
}
})
//滑鼠在元素內部移到時不斷觸發事件
$(document).bind('mousemove', function(e) {
if (dragable) {
pageX = e.pageX
//設置寬度
$(".Parent-left").width(pageX)
}
})
//阻止預設事件
e.preventDefault()
})
})
</script>
</body>
</html>
