<!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. Mybatis #和$的区别

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

  2. iOS 禁止边缘滑动返回

    self.navigationController.interactivePopGestureRecognizer.enabled = NO;

  3. 四种常见的App弹窗设计,你有仔细注意观察吗?

    弹窗又称为对话框,是App与用户进行交互的常见方式之一.弹窗分为模态弹窗和非模态弹窗两种,两者的区别在于需不需要用户对其进行回应.模态弹窗会打断用户的正常操作,要求用户必须对其进行回应,否则不能继续其 ...

  4. 解决 SVN Skipped 'xxx' -- Node remains in conflict

    svn 提交报错 提交命令: svn update 提示代码: Skipped 'ApiController.php' -- Node remains in conflict At revision ...

  5. Git-将已有的项目提交到Git

    准备工作:1. 安装Githttp://git-scm.com/download/2.申请一个GitHub或者coding账号(coding为国产,不需FQ呦.两者方法基本相同,本文以coding为例 ...

  6. JSON.parse()和JSON.stringify()区别

    parse用于从一个字符串中解析出json对象,如: var str = '{"name":"huangxiaojian","age":&q ...

  7. 浏览器-07 chromium 渲染1

    Chromium 软件渲染 软件渲染就是利用CPU,根据一定的算法来计算生成网页的内容; Chromium都是用软件渲染的技术来完成页面的绘制工作(除非强行打开硬件加速绘制); 软件渲染基础和架构 R ...

  8. Codeforces Round #353 (Div. 2)

    数学 A - Infinite Sequence 等差数列,公差是0的时候特判 #include <bits/stdc++.h> typedef long long ll; const i ...

  9. Kinect的那些事儿

    Kinect结合Unity3d跑酷游戏体感Demo 今天收拾东西,在柜子的翻出了一台崭新的Kinect,说起来真是惭愧,大学毕业那会儿,慈老师(和名字一位慈祥的好老师,也是我的毕业设计指导老师)赞 助 ...

  10. cetnos 7 ntp服务的安装与配置

    首先需要搭建yum本地仓库 http://www.cnblogs.com/jw35/p/5967677.html   #搭建yum仓库方法 yum install ntp -y        #安装n ...