dragdrop 修改版
<!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 修改版的更多相关文章
- Medoo个人修改版
Medoo是一款轻量级的php数据库操作类,下面不会介绍Medoo的使用方法,想学习Medoo请前往官网自学:http://medoo.in/ 在接触Medoo之前,一直是用自己写的php数据库操作类 ...
- Android 仿美团网,大众点评购买框悬浮效果之修改版
转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! 我之前写 ...
- 黄聪：WordPress图片插件：Auto Highslide修改版（转）
一直以来很多人都很喜欢我博客使用的图片插件,因为我用的跟原版是有些不同的,效果比原版的要好,他有白色遮罩层,可以直观的知道上下翻图片和幻灯片放映模式.很多人使用原版之后发现我用的更加帅一些,于是很多人 ...
- sqm(sqlmapGUI) pcat修改版
sqlmap是一款开源的注入工具,支持几乎所有的数据库,支持get/post/cookie注入,支持错误回显注入/盲注,还有其他多种注入方法. 支持代理,指纹识别技术判断数据库 .而sqm(sqlma ...
- 转载：Eclipse+Spket插件+ExtJs4修改版提供代码提示功能[图]
转载:Eclipse+Spket插件+ExtJs4修改版提供代码提示功能[图] ExtJs是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架.功能丰富,无人能出其右.无论是界面 ...
- 若快打码平台python开发文档修改版
一.打码的作用 在进行爬虫过程中,部分网站的登录验证码是比较简单的,例如四个英文数字随机组合而成的验证码,有的是全数字随机组成的验证码,有的是全中文随机组成的验证码.为了爬虫进行自动化,需要解决自动登 ...
- 安装阿里云github提供的修改版minikube
由于kubenetes域名背墙(gcr.io),如kubernetes-dashboard服务依赖不能正常使用. $ docker pull gcr.io/google_containers/paus ...
- Indy 10.5.8 for Delphi and Lazarus 修改版(2011)
Indy 10.5.8 for Delphi and Lazarus 修改版(2011) Internet Direct(Indy)是一组开放源代码的Internet组件,涵盖了几乎所有流行的I ...
- [C语言]声明解析器cdecl修改版
一.写在前面 K&R曾经在书中承认,"C语言声明的语法有时会带来严重的问题.".由于历史原因(BCPL语言只有唯一一个类型——二进制字),C语言声明的语法在各种合理的组合下 ...
随机推荐
- nfs部署和优化
nfs--网络文件系统 1.说明:允许一个系统在网络上与他人共享目录和文件 2.好处:通过nfs服务,就可以让这个机器访问远程的文件,像访问自己的文件一样,属于cs通信 3.原理说明:假设有A,B ...
- 关于awk的逗号问题
对于awk逗号的问题,我昨天看的一本书有提过: <Linux就是这个范儿>挺好的书,大家可以看看~~~~ 测试过,总结如下(不知道总结有没有错,欢迎大家吐槽,欢迎大家吐槽,吐槽,吐槽... ...
- hive数据操作
mdl是数据操作类的语言,包括向数据表加载文件,写查询结果等操作 hive有四种导入数据的方式 >从本地加载数据 LOAD DATA LOCAL INPATH './examples/files ...
- oracle数据库创建后要做的事情
在SQL Plus工具中(oracle自带)用conn /as sysdba登录数据库. 一:先新建用户 create user test01 identified by test02(test01为 ...
- 【Java EE 学习 34】【struts2学习第一天】
一.struts2简介 struts2是一个用来开发MVC应用程序的框架.它提供了Web应用程序开发过程中的一些常见问题的解决方案. 1.struts2的作用域范围:三层架构当中的第一层,相当于MVC ...
- 8-07CONTIUE 、 BREAK、RETURN
CONTIUE: 可以让程序跳过CONTIUE关键字之后的语句,回到WHILE循环的第一行命令. BREAK:让程序跳出循环,结束WHILE的循环. BREAK: 让系统完全跳出循环,结束WHILE循 ...
- Log4j2 - 配置
官方文档:http://logging.apache.org/log4j/2.x/index.html 1 概述 Log4j2的配置包含四种方式,其中3种都是在程序中直接调用Log4j2的方法进行配置 ...
- 《DSP using MATLAB》示例Example5.11
- 防止 jsp被sql注入的五种方法
一.SQL注入简介 SQL注入是比较常见的网络攻击方式之一,它不是利用操作系统的BUG来实现攻击,而是针对程序员编程时的疏忽,通过SQL语句,实现无帐号登录,甚至篡改数据库. 二.SQL注入攻击的总体 ...
- NSDateFormatter 相关理解
Formatter译为格式,相应的NSDateFormatter就相当于是NSDate的转换类,将NSDate转换为另一种格式,或转换回来.NSDate没有自己的输出,需要借助NSDateFormat ...