一.效果。如下图中，各途中可相互拖拉，右下角可删除。注意图1和图2对比区别

图1

图2

二.源码详解

html源码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>公告页面管理</title>

    <script src="jquery-1.11.1.min.js"></script>

    <script src="jquery-ui.min.js"></script>

    <script src="report_page.js"></script>

<style type="text/css">

.page_title{

    width:90%;

}

header{

    height: 60px;

    border-bottom: 1px solid #f0f0f0;

    line-height: 60px;

    margin-bottom: 30px;

    background-color:#243141;

}

.navigation {

    height: 40px;

    line-height:40px;

    width: 100%;

    background-color: #2175bc;

}

a {

    text-decoration: none;

}

a:hover {text-decoration: none;}

.navigator_zy {

    float: left;

    font-size: 15px;

    text-decoration: none;

    color: #FFF;

    padding-left: 30px;

    padding-left: 30px;

}

.navigator_zy>a>span {

    color: #fff;

}

#dropzone {

    padding: 20px;

    background: #eaeaea;

      min-height: 100px;

    overflow: hidden;

}

.item {

    float:left;

    width:145px;

    height:220px;

      cursor: pointer;

      margin: 5px;

      padding: 5px 10px;

      border-radius: 3px;

      position: relative;

}

.item .remove {

      position: absolute;

      bottom: 0px;

      right: 0px;

}

ul, menu, dir {

    display: block;

    list-style-type: disc;

    -webkit-margin-before: 1em;

    -webkit-margin-after: 1em;

    -webkit-margin-start: 0px;

    -webkit-margin-end: 0px;

    -webkit-padding-start: 40px;

}

.fanhuiimg {

    float: right;

    margin-right: -26px;

    margin-top: 60px;

    width: 26px;

    height: 87px;

    cursor: pointer;

}

</style>

</head>

<body>

    <div class="container">

        <div id="dropzone">

            <div class="item drop-item" idStr="1" style="background:url(image/1.jpg);background-size:100% 100%;">

                <button type="button" class="btn btn-default btn-xs remove">

                    <span class="glyphicon glyphicon-trash"></span>

                </button>

            </div>

            <div class="item drop-item" idStr="2" style="background:url(image/2.jpg);background-size:100% 100%;">

                <button type="button" class="btn btn-default btn-xs remove">

                    <span class="glyphicon glyphicon-trash"></span>

                </button>

            </div>

            <div class="item drop-item" idStr="3" style="background:url(image/3.jpg);background-size:100% 100%;">

                <button type="button" class="btn btn-default btn-xs remove">

                    <span class="glyphicon glyphicon-trash"></span>

                </button>

            </div>

            <div class="item drop-item" idStr="4" style="background:url(image/4.jpg);background-size:100% 100%;">

                <button type="button" class="btn btn-default btn-xs remove">

                    <span class="glyphicon glyphicon-trash"></span>

                </button>

            </div>

            <div class="item drop-item" idStr="5" style="background:url(image/5.jpg);background-size:100% 100%;">

                <button type="button" class="btn btn-default btn-xs remove">

                    <span class="glyphicon glyphicon-trash"></span>

                </button>

            </div>

            <div class="item drop-item" idStr="6" style="background:url(image/6.jpg);background-size:100% 100%;">

                <button type="button" class="btn btn-default btn-xs remove">

                    <span class="glyphicon glyphicon-trash"></span>

                </button>

            </div>

            <div class="item drop-item" idStr="7" style="background:url(image/7.jpg);background-size:100% 100%;">

                <button type="button" class="btn btn-default btn-xs remove">

                    <span class="glyphicon glyphicon-trash"></span>

                </button>

            </div>

        </div>

    </div>

</body>

</html>

js源码

$(function(){

    $('.btn.remove').click(function(){

        if(confirm("确定要删除页面吗？")) {

            $(this).parent().detach();

        }

    });

    var dropable = $('#dropzone').droppable({

        activeClass : 'active',

        hoverClass : 'hover',

        accept : ":not(.ui-sortable-helper)"

    });

    dropable.sortable({

        items : '.drop-item',

        sort : function() {

            $(this).removeClass("active");

        }

    });

    $('#report_page_save_btn').click(function(){

        save();

    });

    $('#report_page_def_btn').click(function(){

        if(confirm("确定要恢复页面数据吗？")) {

            set_def();

        }

    });

});

使用其他第三方js结构如下。其实就只有使用了jquery-ui

另一个简单案例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>公告页面管理</title>

    <script src="jquery-1.11.1.min.js"></script>

    <script src="jquery-ui.min.js"></script>

 <style>

  #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }

  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }

  </style>

  <script>

  $(function() {

    $( "#draggable" ).draggable();

    $( "#droppable" ).droppable({

      drop: function( event, ui ) {

        $( this )

          .addClass( "ui-state-highlight" )

          .find( "p" )

            .html( "Dropped!" );

      }

    });

  });

  </script>

</head>

<body>

<div id="draggable" class="ui-widget-content">

  <p>请把我拖拽到目标处！</p>

</div>

<div id="droppable" class="ui-widget-header">

  <p>请放置在这里！</p>

</div>

</body>

</html>

jquery-ui-处理拖动位置Droppable，Draggable的更多相关文章

  1. jQuery UI API - 可拖拽小部件（Draggable Widget）(转)

    所属类别 交互(Interactions) 用法 描述:允许使用鼠标移动元素. 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse I ...

  2. JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

  3. jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）

    1.表单验证插件——validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:   $(form).validate({o ...

  4. jquery ui draggable,droppable 学习总结

    刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能. draggable()是被拖动的元素 ...

  5. JQuery UI Draggable插件使用说明文档

    JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受css: ui-draggable影响, 拖动过程中的css: ui-draggable-drag ...

  6. jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法

    前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...

  7. jquery UI 跟随学习笔记——拖拽（Draggable）

    引言 这周暂时没有任务下达,所以老大给我的任务就是熟悉jquery相关插件,我就先选择了jquery UI插件,以及jquery库学习. 我用了两天的时候熟悉Interactions模块中的Dragg ...

  8. 让 jQuery UI draggable 适配移动端

    背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...

  9. 如何使用jquery - ui 的图标icons 及图标的相对位置 +jquerui是如何来显示图标的?

    1. 只需要引入 jquery-ui 的主css文件: jquery-ui.css 文件?? 不需要 引入 jquery-ui-structure/theme.css文件??? ,,,,, 2. 一定 ...

随机推荐

  1. 阿里云377秒完成100TB数据排序：秒三星百度

    阿里云377秒完成100TB数据排序:秒三星百度 今日,Sort Benchmark 在官方网站公布了 2015 年排序竞赛的最终成绩.其中,阿里云用不到 7 分钟(377 秒)就完成了 100TB ...

  2. [No00004B]Windows 下面为Python3.5安装NoteBook

    python3.5安装NoteBook,网上搜了一下教程,几乎很多转帖,或者是2.x版本的,很少有直接可以用的.自己琢磨了一下午,终于搞定了,现在贴出来.希望大家以后转帖什么的都先测试一下,互联网时代 ...

  3. poj 2186 Popular Cows

    Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 29908   Accepted: 12131 De ...

  4. BZOJ 2818: Gcd

    2818: Gcd Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 4443  Solved: 1960[Submit][Status][Discuss ...

  5. 全面解读python web 程序的9种部署方式

    转载自鲁塔弗的博客,本文地址http://lutaf.com/141.htm  python有很多web 开发框架,代码写完了,部署上线是个大事,通常来说,web应用一般是三层结构 web serve ...

  6. S2总结笔记

    第一章:深入.NET框架 1..NET FrameWork两大组件是什么? 解析:.NET 框架类库(FCL:FrameWork Class Library)和公共语言运行时(CLR:common l ...

  7. Tomcat 增加静态文件目录, 外部目录

    很简单, 随手记下: conf目录下的server.xml, 在对应的里面增加一行: <Context docBase="/home/tomcat/archives/adserver& ...

  8. 5 个最好的3D游戏开发工具（转）

    转自:http://www.open-open.com/news/view/33a4f0 5 个最好的3D游戏开发工具 jopen 2012-11-19 22:56:21 • 发布 摘要:UDK(th ...

  9. silverlight: http请求的GET及POST示例

    http请求的get/post并不是难事,只是silverlight中一切皆是异步,所以代码看起来就显得有些冗长了,下面这个HttpHelper是在总结 园友 的基础上,修改得来: namespace ...

  10. 制作stick侧边栏导航效果

    其实这种效果网上好多的插件,但是我想自己实现看看,其实把思路理清实现起来就非常简单了,让我们看看: 分析: 从图中我们可以看出:右边的top=100px,那么它应该在第一个框的top+height=1 ...