如何实现利用css和js实现可拖拽并且左右可分栏的插件

最新推荐文章于 2024-08-13 08:41:33 发布

搞开发的小哥哥

最新推荐文章于 2024-08-13 08:41:33 发布

阅读量943

点赞数

文章标签： css js 纯些插件

本文链接：https://blog.youkuaiyun.com/LIAOJIASONG1024/article/details/102476821

版权

本文将逐步指导你如何创建一个可拖拽且能左右分栏的纯CSS和JS插件。通过学习，你将掌握相关技巧，实现自定义布局的交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

持续跟新第一期，每期教你一个小技巧！

** 旧城故事

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jquery拖拽从而改变div大小效果</title>

<style>
*{
   margin:0;padding:0;}
ul,ol,li{
   list-style: none;}
#wrap{
   width:660px;height: 150px;margin:10px auto;position: relative;clear:both;background: #0cc;}
#wrap li{
   width: 220px;float: left;height: 150px;background: #ccc;overflow: hidden;
text-align: center;line-height: 50px;}
#wrap li.li1{
   background: #777;}
#wrap li.li2{
   background: #ccc;}
#wrap li.li3{
   background: #999;}
#wrap label{
   float: left;width: 10px;height: 150px;
position: