<!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. MVC中使用Action全局过滤器出现：网页无法正常运作 将您重定向的次数过多。解决办法

    前言当我们访问某个网站的时候需要检测用户是否已经登录(通过Session是否为null),我们知道在WebForm中可以定义一个BasePage类让他继承System.Web.UI.Page,重写它的 ...

  2. 编辑 Ext 表格（一）——— 动态添加删除行列

    一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除.   (1) 动态添加表格的行  gridS ...

  3. Oracle行转列、列转行的Sql语句总结(转)

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

  4. ActiveMQ开发与简介

    1.概述与介绍 ActiveMQ是Apache出品,最流行的.功能强大的即时通讯和集成模式的开源服务器.ActiveMQ是一个完全支持JMS1.1和J2EE1.4规范的JMSProvider实现.提供 ...

  5. Asp.net中导出Excel文档（Gridview）

    主要思路,通过GridView来导出文档. 新建一个Aspx页面,页面创建GridView控件,后台绑定好数据源.然后load中直接打印即可导出 前台的GridView <asp:GridVie ...

  6. C#delegate委托

    类似函数,却没有语句体. using System; using System.Collections.Generic; using System.Linq; using System.Text; u ...

  7. 【JavaScript兼容】关于IE8及以下无法通过getElementsByClassName()方法获得元素的解决方法

    try{ var a = document.getElementsByClassName("cla"); console.log(a); }catch(ex){ var array ...

  8. java基础-接口

    浏览以下内容前,请点击并阅读 声明 接口是java语言中的一个引用类型,和类一样,接口可以包含常量,方法签名,默认方法,静态方法和嵌套类型.含有方法主体的只有其中的默认方法和静态方法.接口不能被实例化 ...

  9. codeforces泛做..

    前面说点什么.. 为了完成日常积累,傻逼呵呵的我决定来一发codeforces 挑水题 泛做.. 嗯对,就是泛做.. 主要就是把codeforces Div.1的ABCD都尝试一下吧0.0.. 挖坑0 ...

  10. VR的世界里没有雾霾！暴风魔镜发布Matrix一体机

         在2016年接近尾声的时候,暴风魔镜给VR行业带来一波暖流.12月20日,暴风魔镜宣布推出最新VR一体机--暴风魔镜"3K屏概念机"MATrix及VR眼镜S1两大产品. ...