htmlマウスドラッグによる高さ調整
8365 ワード
原生コードとjsコードはdiv要素がマウスのドラッグに従って高さを調整することを実現し、高さについてはこの修正を参照することもできます.(コードにjqueryを導入するのは要素を取るのに便利で、この方法は完全にjqueryに変更することができて、1時間のバインドの方法を変更するだけでいいです.)主にhtml 5によるドラッグイベントを利用して実現され、直接コードに接続され、論理はあまり複雑ではありません.
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title> title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js">script>
<style type="text/css">
#dragDivContainer {
width:100%;
height:160px;
border: 1px black solid;
}
#adjustDiv{
bottom: 0;
width:100%;
height:100px;
border: 1px red solid;
}
#dragDiv{
bottom: 0;
width:100%;
height:6px;
background-color:#999;
cursor:n-resize;
}
style>
head>
<body>
<div id="dragDivContainer" ondrop="dropHandle(event)" ondragover="dragoverHandle(event)">
div， div
<div class="form-control" id="adjustDiv" >
div：
div>
<div draggable="true" id="dragDiv" ondragstart="dragstartHandle(event)">div>
div>
body>
<script>
var src_posi_Y = 0;
var dragDiv = 6;
var minHeight = 100;
function dragstartHandle(e) {
src_posi_Y = e.pageY;//
e.dataTransfer.setData("targetId", e.target.id);// ， ， firefox ondragover ， ， 。（chrome ）
console.log("start Y ：" + e.pageY);
}
function dragoverHandle(e) {
var dest_posi_Y = e.pageY;//
console.log("dragover Y:" + e.pageY);
var move_dist = dest_posi_Y - src_posi_Y;
console.log("dragover move_dist:" + move_dist);
var afterAdjHeight = $("#adjustDiv").height() + move_dist;
console.log("dragover afterAdjHeight:" + afterAdjHeight);
afterAdjHeight = afterAdjHeight > minHeight ? afterAdjHeight : minHeight;
var containerHeight = $("#dragDivContainer").height() - $("#adjustDiv").height() + afterAdjHeight;
$("#dragDivContainer").css("height", containerHeight);
$("#adjustDiv").css("height", afterAdjHeight);
src_posi_Y = dest_posi_Y;
e.preventDefault();
}
function dropHandle(e) {
console.log("drop Y:" + e.pageY);
src_posi_Y = 0
e.preventDefault();
e.stopPropagation();
}
script>
html>