JQuery拖拽元素改變大小尺寸

時間 2019-11-07

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: relative;
}javascript

.con {
display: flex;
height: 100%;
}css

.Parent-left {
width: 150px;
border-right: 1px solid #000000;
}html

.Parent-right {
flex: 1;
}java

.Parent-left,
.Parent-right {
height: 100%;
}jquery

.ChildL,
.ChildR {
height: 100%;
}flex

.parLeCon,
.parRiCon {
height: 100%;
width: 99%;
word-break: break-all;
}htm

.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() //鼠標拖動的寬度ip

//鼠標按下事件
$(".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>utf-8

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。