<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实现获得一段时间内所在的所有周的时间

    function getWeek($startdate,$enddate) { //参数不能为空 if(!empty($startdate) && !empty($enddate)){ ...

  2. web页面开发笔记（不断更新）

    布局: 1.左右分列2端:使用float:left+float:right,如果一边有多列的话,另一列会对齐最下面那列.所以一般把左右各设一列,一列中再细分多行. 2.div不跟随:使用clear:b ...

  3. Web服务器集群搭建关键步骤纪要

    前言:本文记述了搭建一个小型web服务器集群的过程,由于篇幅所限,系统.软件的安装和基本配置我这里就省略了,只记叙关键配置和脚本内容.假如各位朋友想了解各软件详细配置建议查阅官方文档. 一 需求分析: ...

  4. hdu 3518 Boring counting 后缀数组LCP

    题目链接 题意:给定长度为n(n <= 1000)的只含小写字母的字符串,问字符串子串不重叠出现最少两次的不同子串个数; input: aaaa ababcabb aaaaaa # output ...

  5. matlab之点运算基本思想及几何平移变换

    1.对数变换可以增强图像中较暗部分的细节,因为对数可以将较小的值放大,而较大的值缩小 2.伽马变换:y = (x + esp) ^ γ,x,y的取值范围是0到1,esp是补偿系数,γ为伽马系数.γ的不 ...

  6. Foreign Exchange

     10763 Foreign ExchangeYour non-profit organization (iCORE - international Confederation of Revolver ...

  7. MYSQL外键约束的参照操作

    如果表A的主关键字是表B中的字段,则该字段称为表B的外键,表A称为主表,表B称为从表.外键是用来实现参照完整性的,不同的外键约束方式将可以使两张表紧密的结合起来,特别是修改或者删除的级联操作将使得日常 ...

  8. 使用plspl创建orcale作业

    1.由于权限问题,第一步应先以sys账户登录,路径:工具->DBMS 调试程序->作业  ,新建一个作业,出现如下图的窗口 2.开始依次填写相应内容,Name为作业名字,注意要加上用户名前 ...

  9. MySQL日期和时间函数

    WEEKDAY( date ) 返回date的星期索引( = 星期天 ) . mysql> select WEEKDAY( '1997-10-04 22:23:00' ) ; mysql> ...

  10. oracle 将科学计数法数据转换为非科学计数法数据

    oracle 自定义函数: CREATE OR REPLACE FUNCTION ConvertNumeric(rawData VARCHAR2) --用于返回转换科学计算法dhx RETURN VA ...