<html>
<head><title>draggable</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
<div id="container" style="background-color:#ccc;width:500px;height:300px;">
    <div class="alert alert-dismissable alert-info dragsource">
    <p>aaaa</p>
    </div>
    <div class="alert alert-dismissable alert-info dragsource">
    <p>bbbb</p>
    </div>
    <div class="alert alert-dismissable alert-info dragsource">
    <p>cccc</p>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $(".dragsource").draggable({
            revert: "invalid",
            cursor: "move", //移动时鼠标的位置
            cursorAt: { top: 56, left: 56 },
            snap: ".dragsource",//吸附到其他可托动元素
            containment: "parent",//限制拖放范围,亦可以用四元数组
            //axis: "y",//只可以沿着Y轴拖动
            start: function (event, ui) {
                //$(this).find("p").html("Starting");
            },
            stop: function (event, ui) {
                // $(this).find("p").html("stop");
            }
        });
        $("#container").droppable({
            //activeClass: "ui-state-hover",
            //hoverClass: "ui-state-active",//拖动时的样式
            activate: function (event, ui) {
                // $(this).find("p").html( "Drop here !" );
            },
            over: function (event, ui) {
                // $( this ).find( "p" ).html( "Oh, Yeah!" );

            },
            out: function (event, ui) {
                // $( this ).find( "p" ).html( "Don't leave me!" );

            },
            drop: function (event, ui) {
                //拖放
                // $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
            }
        });
    })
    </script>

　　

jquery UI Draggable和Droppable 案例的更多相关文章

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

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

  2. 让 jQuery UI draggable 适配移动端

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

  3. jquery ui draggable,droppable 学习总结

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

  4. jQuery UI - draggable 中文API

    ·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...

  5. JQuery UI - draggable(转)

    ·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...

  6. JQuery UI - draggable参数中文详细说明

    概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个参 ...

  7. Jquery ui draggable在chrome和ie7下的bug

    当页面足够长,向下滚动一些之后, 在拖动时,被拖动的div会向下产生滚动距离那么高(scrolltop)的差距 鼠标位置距div顶部差距了正好页面scroll的距离,页面scoll越多差的越多. 解决 ...

  8. jQuery UI Draggable + Sortable 结合使用

    工作中需要将一个左边的设计好的控件,拖拽到右边的面板中,同时保持右边面板中的控件自由排序,这时候就需要及支持拖拽又支持排序的操作了, Demo截图:从左边控件拖到右边区域 代码段: <scrip ...

  9. JQuery UI - selectable

    ·概述 Selectable插件允许用户对指定的元素进行选中的动作.此外还支持按住Ctrl键单击或拖拽选择多个元素. 官方示例地址:http://jqueryui.com/demos/selectab ...

随机推荐

  1. php数组去重实例及分析

    php数组去重实例及分析.  一维数组的重复项: 使用array_unique函数即可,使用实例 <?php    $aa=array("apple","banan ...

  2. php字符串首字母转换大小写的实例分享

    php中对字符串首字母进行大小写转换的例子. in: 后端程序首字母变大写:ucwords() <?php $foo = 'hello world!'; $foo = ucwords($foo) ...

  3. window2003安全设置

    1.    网上邻居->右键 属性->本地连接 右键属性->Microsoft网络的文件和打印机共享去掉选中   (影响端口: 139,445) 2.    禁止ADMIN$缺省共享 ...

  4. Demo学习： Dialogs Anonymous Callback

    Dialogs\Dialogs Anonymous Callback 窗体回调函数使用. 1. 标准回调函数 ShowMessage(const Msg: string; CallBack: TUni ...

  5. 部门招聘开发人员（python相关）

    岗位职责: 1.参与需求分析,产品设计,功能开发: 2.负责系统平台的日常维护: 3.与团队技术交流,共同进步 任职要求: 1.精通Python:对Python有兴趣. 2.熟悉MVC架构,精通Dja ...

  6. 简单的异步任务工具——rq 的使用教程

    rq是一个简单的,轻量级的异步任务工具. 如果在网站中用户发起一个用时很久(大于2分钟)的请求,如果用同步的方式,服务器就会返回超时. 这时候就需要用异步请求,用户发起请求后,服务端把作业扔给另一个进 ...

  7. MyEclipse新建Maven工程

    1.File-->New-->Web Project 2.新建文件夹 需要新建4个源文件夹,分别是  src/main/java   src/main/resources   src/te ...

  8. VB语言基础

    一.常用的关键字 Dim Private Sub  Public End If Else Form Me Single As Integer Unload Do While MessageBox等 二 ...

  9. 基于Python+协程+多进程的通用弱密码扫描器

    听说不想扯淡的程序猿,不是一只好猿.所以今天来扯扯淡,不贴代码,只讲设计思想. 0x00 起 - 初始设计 我们的目标是设计一枚通用的弱密码扫描器,基本功能是针对不同类型的弱密码,可方便的扩展,比如添 ...

  10. 1048: [HAOI2007]分割矩阵 - BZOJ

    Description 将一个a*b的数字矩阵进行如下分割:将原矩阵沿某一条直线分割成两个矩阵,再将生成的两个矩阵继续如此分割(当然也可以只分割其中的一个),这样分割了(n-1)次后,原矩阵被分割成了 ...