<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽改变大小</title>
<script src="./js/jquery.js"></script>
<style>
.table-edit-frame{
position: absolute;
left: 0;
right: 0;
bottom:-100%;
height:65%;
background: slategray;
transition: bottom linear 0.3s;
}
.table-edit-frame .frame-pull-button{
display: inline-block;
width:28px;
height:18px;
background: url(./img/pull.png) no-repeat;
background-size: 28px 18px;
position: absolute;
left:50%;
margin-left: -14px;
top:-9px;
}
.table-edit-frame .frame-close-button{
display: inline-block;
width:18px;
height:18px;
background: url(./img/close.png) no-repeat;
background-size: 18px 18px;
position: absolute;
right:0;
top:0;
}
</style>
</head>
<body>
<button id="btn">点击弹出</button>
<div class="table-edit-frame">
<span class="frame-pull-button"></span>
<span class="frame-close-button"></span>
</div>
<script>
$("#btn").click(function(){
$(".table-edit-frame").css("bottom","0");
});
$(".table-edit-frame .frame-close-button").click(function(){
$(".table-edit-frame").css({"bottom":"-100%","height":"65%"});
});
/*拖拽开始*/
var oPanel = $('.table-edit-frame');
var oDragIcon = $('.frame-pull-button');
/*定义2个变量*/
/*鼠标按下时光标的Y值*/
var disY = 0;
/*拖拽前div的高*/
var disH = 0;
/*给按钮加点击事件*/
oDragIcon.mousedown(function(ev){
var ev = ev || window.event;
/*获取鼠标按下时光标Y的值*/
disY = ev.clientY;
/*获取拖拽前div的高*/
disH = oPanel.get(0).offsetHeight;
$(document).mousemove(function(ev){
var ev = ev || window.event;
/*拖拽时为了对宽和高 限制一下范围，定义两个变量*/
var H = disY-ev.clientY + disH;
/* 拖拽后物体的高*/
oPanel.css("height",H +'px');
});
$(document).mouseup(function(){
$(document).unbind('mousemove');
});
});
/*拖拽结束*/
</script>
</body>
</html>
jsplumb获取json数据自动渲染_JsPlumb 动态_jsplumb实例
版权申诉
166 浏览量
2022-09-23
05:53:21
上传
评论
收藏 331KB RAR 举报
jsplumb获取json数据自动渲染.rar （6个子文件） 
json 
table.json 779B
test6.html 3KB js jquery.js 278KB jquery-ui.js 527KB jquery.jsPlumb.js 490KB jsplumb.min.js 195KB资源评论
