<!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. Oracle行转列、列转行的Sql语句总结(转)

    多行转字符串 这个比较简单,用||或concat函数可以实现 select concat(id,username) str from app_userselect id||username str f ...

  2. apache自带的web监控器配置

    第一:将mod_status模块放开,即去掉httpd.conf中的# 第二:在httpd.conf后面添加下面内容 <Location /server-status> SetHandle ...

  3. tp框架之数据添加

    1.数组添加 //$attr = array("Code"=>"n088","Name"=>"哈萨克族"); ...

  4. php中"::"双冒号有什么作用

    PHP代码 lazycms::$sysname 第一次见到这种表现方式,请问是双冒号什么意思 答:直接属类的方法或属性.也就是static 静态方法或属性的使用.域运算符,一般用于在B类对象中使用A类 ...

  5. zoj 3820(2014牡丹江现场赛B题)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5374 思路:题目的意思是求树上的两点,使得树上其余的点到其中一个点的 ...

  6. Create a REST API with Attribute Routing in ASP.NET Web API 2

    原文:http://www.asp.net/web-api/overview/web-api-routing-and-actions/create-a-rest-api-with-attribute- ...

  7. CodeForces460B. Little Dima and Equation

    B. Little Dima and Equation time limit per test 1 second memory limit per test 256 megabytes input s ...

  8. kvc（键-值编码）

    kvc(键-值编码) { NSString *_name; Author *_author; NSArray *_kvcArray; float price;} //kvc,setValue 的设的值 ...

  9. [Java] 位运算

    https://ckjoker.github.io/2015/03/01/Java-bit-primary/

  10. 解决 卸载Mysql后，服务还在的问题

    HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\Eventlog\Application\MySQL文件夹:删除HKEY_LOCAL_MACHINE\ ...