js,jQuery实现拖拽自定义移动端板块，web移动端开发

chenyi0713

于 2017-01-13 11:00:41 发布

阅读量2.1k

点赞数

分类专栏： js jquery 文章标签： css 前端布局需求实例

本文链接：https://blog.csdn.net/chenyi0713/article/details/54406666

版权

本文介绍了如何在web移动端开发中，利用JavaScript和jQuery实现板块的拖拽自定义布局。首先，作者展示了原生JS的实现方式，接着通过HTML和CSS创建页面结构，最终结合jQuery完成拖拽效果，以满足项目中对于灵活布局的需求。

摘要由CSDN通过智能技术生成

由于项目需求，需要一个能排版移动端页面布局的插件，因此，作为前端的就首当其任了
一般情况下写代码，时间充足我都会先写一遍原生JS 效果，实例代码如下

css :

        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            #target{
                width:400px;
                height:700px;
                margin:100px auto;
                border: 1px solid #333;
                position:relative;
            }
            .header{
                height:50px;
                background:blue;
                box-sizing: border-box;
                border: 1px solid #ccc;
                min-width: 320px;
                cursor: all-scroll;
                width: 100%;
            }
            .banner{
                width: 100%;
                height:100px;
                background:aquamarine;
                box-sizing: border-box;
                border: 1px solid #ccc;
                cursor: all-scroll;
            }
            .describe{
                width: 100%;
                height:150px;
                background:pink;
                box-sizing: border-box;
                border: 1px solid #666;
                cursor: all-scroll;
            }
            .details{
                width: 100%;
                height:300px;
                background:green;
                box-sizing: border-box;
                border: 1px solid #666;
                cursor: all-scroll;
            }
        </style>

html:

    <body id

最低0.47元/天解锁文章

chenyi0713

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js,jQuery实现拖拽自定义移动端板块，web移动端开发

由于项目需求，需要一个能排版移动端页面布局的插件，因此，作为前端的就首当其任了一般情况下写代码，时间充足我都会先写一遍原生JS 效果，实例代码如下css : <style type="text/css"> *{ margin:0; padding:0; }
复制链接

扫一扫