演示网站 jQuery左右分栏拖拽插件
默认用法
#box (必须)
$(‘#box’).initDrag()
自定义类名用法
#box (必须)
$(‘#box’).initDrag({
leftMinWidth: ‘300px’, //左边最小宽度
rightMinWidth: ‘300px’, //右边最小宽度
dragClass: ‘.drag-box’, //拖拽盒子类名
leftClass: ‘.left’, //左边盒子类名
rightClass: ‘.right’, //右边盒子类名
resizeClass: ‘.resize’, //拖拽按钮类名
})
编写代码
<!--
* @Description:
* @Version:
* @Autor: MrSong
* @Date: 2021-03-12 14:26:37
* @LastEditors: MrSong
* @LastEditTime: 2021-03-12 16:12:48
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQ拖拽插件</title>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="./css/index.css">
<script src="./js/index.js"></script>
</head>
<body>
<div class="drag-box" id="box">
<div class="left">
<!--左侧div内容-->
<div class="drag-left">
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
软泥上的青荇，
油油的在水底招摇；
在康河的柔波里，
我甘心做一条水草！
</div>
</div>
<div class="resize" title="收缩侧边栏">
⋮
</div>
<div class="right">
<!--右侧div内容-->
<div class="drag-right">
那榆荫下的一潭，
不是清泉，是天上虹；
揉碎在浮藻间，
沉淀着彩虹似的梦。
寻梦？撑一支长篙，
向青草更青处漫溯；
满载一船星辉，
在星辉斑斓里放歌。
但我不能放歌，
悄悄是别离的笙箫；
夏虫也为我沉默，
沉默是今晚的康桥！
悄悄的我走了，
正如我悄悄的来；
我挥一挥衣袖，
不带走一片云彩。
</div>
</div>
</div>
</body>
<script>
// 默认用法
// #box (必须)
// $('#box').initDrag()
// 自定义类名用法
// #box (必须)
$('#box').initDrag({
leftMinWidth:'300px',//左边最小宽度
rightMinWidth:'300px',//右边最小宽度
dragClass: '.drag-box',//拖拽盒子类名 (非必须)
leftClass: '.left',//左边盒子类名 (非必须)
rightClass: '.right',//右边盒子类名 (非必须)
resizeClass: '.resize',//拖拽按钮类名 (非必须)
})
</script>
</html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
