<!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. 在yii框架中如何连接数据库mongodb

    在文件夹common/config/main_local.php中加入如下代码: <?php return [ 'components' => [ 'mongodb' => [ 'c ...

  2. jquery 键盘回车事件

    <input id="search" placeholder="输入要领用的资产条码" id="scanCode" type=&quo ...

  3. .NET 获取客户端的操作系统版本、浏览器版本和IP地址

    我们在使用.NET做网站的时候,很多情况下需要需要知道客户端的操作系统版本和浏览器版本,怎样获取客户端的操作系统和浏览器版本呢?我们可以通过分析UserAgent来获取. .NET 获取客户端的操作系 ...

  4. c语言for循环

    #include<stdio.h>#include<windows.h>#include <limits.h>#include <math.h>void ...

  5. nginx 配置https upstream 跳转失败

    访问首页没问题,但是在登录跳转重定向时域名被修改成upstream的名字 如果需要跳转的话会出现下面的情况: http://test-xxx-emove_pools/beehive/index ser ...

  6. NetApp 监控

    http://support.ipmonitor.com/mibs/network-appliance-mib/tree.aspx http://www.360doc.com/content/10/1 ...

  7. intellij idea 插件 ideaVim 用法

    intellij idea 插件 ideaVim - Genji_ - 博客园http://www.cnblogs.com/nova-/p/3535636.html IdeaVim插件使用技巧 - - ...

  8. c++2008 并行配置文件和获取字典的所有key的方法

    1 需要 在官网 下载对应的执行包... 2, # !/usr/bin/python3.4 # -*- coding: utf-8 -*- b = { 'video':0, 'music':23 } ...

  9. 练练脑javascript写直接插入排序和冒泡排序

    function insertionSort(array) { if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') ...

  10. 【转】HashMap、TreeMap、Hashtable、HashSet和ConcurrentHashMap区别

    转自:http://blog.csdn.net/paincupid/article/details/47746341 一.HashMap和TreeMap区别 1.HashMap是基于散列表实现的,时间 ...