<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jqxDragDrop, jQuery Draggable, jQWidgets, Events Demo" />
    <meta name="description" content="You can restrict draggables drag area in different ways. In this demo the dragging area of the draggable element is it's parent." />
    <title id='Description'>In this demo is demonstrated how to use the jqxDragDrop plug-in events.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var istag=false;
            $(, height: });
            $('#draggable').jqxDragDrop({ restricter: 'parent',  dropTarget: '.drop-target',revert:false });

            $('#draggable').bind('dragStart', function (event) {
                addEvent(event.type, event.args.position);
            });
            $('#draggable').bind('dragEnd', function (event) {
                addEvent(event.type, event.args.position);
                if(!istag){
                    $('#draggable').animate({
                        'left': '0px',
                        'top': '0px'},
                        , function() {
                    });
                }else{
                    $('#draggable').animate({
                        'left': '200px',
                        'top': '200px'},
                        , function() {
                    });
                }
            });
            $('#draggable').bind('dropTargetEnter', function (event) {
                addEvent(event.type, event.args.position);
                istag=true;
                $('#draggable').jqxDragDrop({revert:false });
                $('#draggable').animate({
                    'left': '200px',
                    'top': '200px'},
                    , function() {
                });
            });
            $('#draggable').bind('dropTargetLeave', function (event) {
                addEvent(event.type, event.args.position);
                istag=false;
                /*$('#draggable').animate({
                    'left': '0px',
                    'top': '0px'},
                    500, function() {
                });*/
            });

            function addEvent(type, position) {
                $('#events').jqxPanel('prepend',
                    '<div class="row">Event: ' + type + ', (' + position.left + ', ' + position.top + ')</div>'
                );
            }

            (function centerLabels() {
                var labels = $('.label');
                labels.each(function (index, el) {
                    el = $(el);
                    ;
                    el.css('top', top + 'px');
                });
            } ());
        });
    </script>
    <style type="text/css">
    .row
    {
        padding: 1px;
    }
    .draggable
    {
        border: 1px solid #bbb;
        background-color: #C9ECFF;
        width: 100px;
        height: 100px;
        left: 30px;
        top: 50px;
        padding: 5px;
        z-index: ;
    }
    #draggable-parent
    {
        background-color: #eeffee;
        width: 350px;
        height: 350px;
        text-align: center;
        border: 1px solid #eee;
        float: left;
    }
    .main-container
    {
        width: 650px;
        z-index: ;
    }
    .events
    {
        float: right;
        padding: 10px;
        font-family: Tahoma;
        font-size: 13px;
    }
    .label
    {
        position: relative;
        font-family: Verdana;
        font-size: 11px;
        color: #;
    }
    .drop-target
    {
        background-color: #FBFFB5;
        width: 150px;
        height: 150px;
        border: 1px solid #ddd;
        margin-left: 190px;
        margin-top: 70px;
        z-index: ;
    }
    </style>
</head>
<body class='default'>
    <div class="main-container">
        <div id="draggable-parent">
            <div id="draggable" class="draggable">
                <div class="label">I can be dragged only inside my parent</div>
            </div>
            <div class="drop-target"><div class="label">I'm a drop target</div></div>
        </div>
        <div id="events" class="events">
        </div>
    </div>
</body>
</html>

dragdrop 修改版的更多相关文章

  1. Medoo个人修改版

    Medoo是一款轻量级的php数据库操作类,下面不会介绍Medoo的使用方法,想学习Medoo请前往官网自学:http://medoo.in/ 在接触Medoo之前,一直是用自己写的php数据库操作类 ...

  2. Android 仿美团网,大众点评购买框悬浮效果之修改版

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! 我之前写 ...

  3. 黄聪：WordPress图片插件：Auto Highslide修改版（转）

    一直以来很多人都很喜欢我博客使用的图片插件,因为我用的跟原版是有些不同的,效果比原版的要好,他有白色遮罩层,可以直观的知道上下翻图片和幻灯片放映模式.很多人使用原版之后发现我用的更加帅一些,于是很多人 ...

  4. sqm(sqlmapGUI) pcat修改版

    sqlmap是一款开源的注入工具,支持几乎所有的数据库,支持get/post/cookie注入,支持错误回显注入/盲注,还有其他多种注入方法. 支持代理,指纹识别技术判断数据库 .而sqm(sqlma ...

  5. 转载：Eclipse+Spket插件+ExtJs4修改版提供代码提示功能[图]

    转载:Eclipse+Spket插件+ExtJs4修改版提供代码提示功能[图] ExtJs是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架.功能丰富,无人能出其右.无论是界面 ...

  6. 若快打码平台python开发文档修改版

    一.打码的作用 在进行爬虫过程中,部分网站的登录验证码是比较简单的,例如四个英文数字随机组合而成的验证码,有的是全数字随机组成的验证码,有的是全中文随机组成的验证码.为了爬虫进行自动化,需要解决自动登 ...

  7. 安装阿里云github提供的修改版minikube

    由于kubenetes域名背墙(gcr.io),如kubernetes-dashboard服务依赖不能正常使用. $ docker pull gcr.io/google_containers/paus ...

  8. Indy 10.5.8 for Delphi and Lazarus 修改版(2011)

    Indy 10.5.8 for Delphi and Lazarus 修改版(2011)    Internet Direct(Indy)是一组开放源代码的Internet组件,涵盖了几乎所有流行的I ...

  9. [C语言]声明解析器cdecl修改版

    一.写在前面 K&R曾经在书中承认,"C语言声明的语法有时会带来严重的问题.".由于历史原因(BCPL语言只有唯一一个类型——二进制字),C语言声明的语法在各种合理的组合下 ...

随机推荐

  1. .NET 泛型

    泛型      泛型将类型参数的概念引入 .NET Framework,类型参数使得设计如下类和方法成为可能:这些类和方法将一个或多个类型的指定推迟到客户端代码声明并实例化该类或方法的时候.例如,通过 ...

  2. Git私钥openssh格式转ppk

    已有my.openssh私钥文件,以及Key passphrase:4c264a73544ee7f3bc6ba6f8a416b6efec9d7cc6e71b745c479159cc7ee0a8cb 若 ...

  3. Mybatis #和$的区别

    1.#将传入的数据当成一个字符串,会自动加上双引号.如 oder by  #{id}  ,那么解析后为oder by  “id” 2.$对传入的数据不进行操作,直接显示原值.如oder by  ${i ...

  4. 仿Redis用来作前端浏览器的数据存储结构

    用js写了一个类似redis存储结构的类库,目前只有的存储类型只有hash.set两个, 还没测试过性能,欢迎各位猿友能够帮我指出程序代码的缺陷, 后期有时间会完善其他几个类型的存储结构. /**** ...

  5. [BI项目记]-搭建代码管理环境之创建团队项目

    此篇主要介绍如何基于TFS环境创建团队项目来进行项目代码的版本管理工作,这一系列将侧重于BI项目,当然对于其它项目也同样适用. 在TFS里开始一个项目,我们首先需要创建一个团队项目. 在Team Ex ...

  6. JavaScript中两个感叹号的作用

    先用一个简单的例子说明:var o={flag:true};var test=!!o.flag;//等效于var test=o.flag||false;alert(test);由于对null与unde ...

  7. IBatis.Net使用总结（三）-- IBatis实现分页返回数据和总数

    IBatis 分页,这里没有使用其他插件,只使用最原始的方法. 输入参数: int currentPage 当前页 int  pageSize 每页大小 Hashtable findCondition ...

  8. ibatis.net MVC 单元测试 错误解决方法

    Q1:Unable to load file via resource "SqlMap.config" as resource.Cause : 未能找到文件:"...Te ...

  9. /var/run/yum.pid 已被锁定，PID 为 XXXX 的另一个程序正在运行。

    安装st-load时, 终端提示 “/var/run/yum.pid 已被锁定,PID 为 13908 的另一个程序正在运行.” 解决方法:直接在终端运行 rm -f /var/run/yum.pid ...

  10. jquery简单开始

    老师讲好少,我也没办法. &(function(){ 执行完所有代码之后再执行这里的代码 }) 选择器: &('#id');      获取id &('.class');   ...