jquery-ui-处理拖动位置Droppable，Draggable

一.效果。如下图中，各途中可相互拖拉，右下角可删除。注意图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的更多相关文章

jQuery UI API - 可拖拽小部件（Draggable Widget）(转)
所属类别交互(Interactions) 用法描述:允许使用鼠标移动元素. 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse I ...
JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
jQuery基础（常用插件表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）
1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({o ...
jquery ui draggable,droppable 学习总结
刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能. draggable()是被拖动的元素 ...
JQuery UI Draggable插件使用说明文档
JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受css: ui-draggable影响, 拖动过程中的css: ui-draggable-drag ...
jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法
前言不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...
jquery UI 跟随学习笔记——拖拽（Draggable）
引言这周暂时没有任务下达,所以老大给我的任务就是熟悉jquery相关插件,我就先选择了jquery UI插件,以及jquery库学习. 我用了两天的时候熟悉Interactions模块中的Dragg ...
让 jQuery UI draggable 适配移动端
背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...
如何使用jquery - ui 的图标icons 及图标的相对位置 +jquerui是如何来显示图标的?
1. 只需要引入 jquery-ui 的主css文件: jquery-ui.css 文件?? 不需要引入 jquery-ui-structure/theme.css文件??? ,,,,, 2. 一定 ...

随机推荐

TC(Total Commander)文件管理神器
TC文件管理神器 Total Commander是一个会显著提高文件操作效率的工具,而文件操作是应用计算机最基本的功夫,也是伴随一生的操作.因此花一点时间学习,而会受益一世. Total Comman ...
BZOJ 1304: [CQOI2009]叶子的染色
1304: [CQOI2009]叶子的染色 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 566 Solved: 358[Submit][Statu ...
removeNode is not defined removeNode is not a function
在javascript操作dom树的时候可能会经常遇到增加,删除节点的事情,比如一个输入框后一个增加按钮,一个删除按钮,点击增加就增加个输入框,点击删除就删除对应的输入框.在一些js框架,如Prot ...
设置apache https服务
配置http.conf,所在位置d:\wamp\bin\apache\apache2.4.9\conf\http.conf LoadModule socache_shmcb_module modu ...
gRpc NET Core
NET Core下使用gRpc公开服务(SSL/TLS) 一.前言前一阵子关于.NET的各大公众号都发表了关于gRpc的消息,而随之而来的就是一波关于.NET Core下如何使用的教程,但是在这众多 ...
Linux Linux程序练习十四（多进程压力测试）
/* * 题目: * 编程一个基本多进程测试框架,提示用户输入进程数.和每个进程数运行圈数.(fork) * 进行多进程压力测试.(execve) * 要求父进程能监控所有子进程的退出,避免僵尸进程. ...
NOI2018准备Day2
昨天雄心壮志了一番,今天就有点儿松懈了,是生于忧患,死于安乐吗刷了15道大水题,5道字符串,5道多维数组,5道顺序查找,9个小时,平均40分钟一道水题,目标10分钟一道......昨天才刷了20道. ...
vbs keys
其使用格式为: object.SendKeys string "object":表示WshShell对象 "string":表示要发送的按键指令字符串,需要放在 ...
MFC下debug改成release版本出现问题及解决办法
自己在debug下成功运行了自己写的测试自己写第三方库的程序,这里有用到opencv库,所以同时用到了自己的库和opencv的库,需求因为要进行速度的测试,是想要把debug改成release版本,这 ...
Redis简介-安装-入门
前言我们team马上要用Redis了. 所以先学习一下这东西. Redis大名很早以前就听过了,以前在的公司都没有用到. 现在有机会终于接触到了,果断学习起来. 什么是redis Redis是完全开 ...

jquery-ui-处理拖动位置Droppable，Draggable

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

随机推荐

热门专题