kissy
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>拖放</title>
<style type="text/css">
.test1 {
position: absolute;
left:100px;
top:100px;
width:100px;height:20px;
background:grey;
}
.test2 {
position: absolute;
left:100px;
top:200px;
width:100px;height:20px;
background:red;
}
.test3 {
position: absolute;
left:200px;
top:300px;
width:200px;height:40px;
background:yellow;
}
</style>
</head>
<body>
<script src="http://a.tbcdn.cn/s/kissy/1.3.0rc/seed-min.js"></script>
<div id="t1">
选择你要拖拽的按钮：
<ul>
<li><button class="test1" id="click-me">A</button></li>
<li><button class="test2" id="click-me2">B</button></li>
</ul>
</div> <script type="text/javascript">
KISSY.use('node',function(S,Node){
Node.one('.test1').on('click',function(e){ KISSY.DOM.style('.test1', {position: 'absolute', top: '300px', left: '300px', width:'200px', height:'40px'});
Node.one('.test1').html('Hello Kissy!'); }); Node.one('.test2').on('click',function(e){
KISSY.DOM.style('.test1', {position: 'absolute', top: '100px', left: '100px', width:'100px', height:'20px'});
Node.one('.test2').html('Hello Kissy!');
});
});
KISSY.use("dd",function(S,DD){ var drag=new DD.Draggable({
node:'.test1',
cursor:'move',
move:true
});
var drag2=new DD.Draggable({
node:'.test2',
cursor:'move',
move:true
});
//使当前拖放对象具备代理功能.
new DD.Proxy().attach(drag);
new DD.Proxy().attach(drag2);
var c = new DD.Constrain({
constrain: true
});
//限制拖放元素的范围为可视窗口区域
c.attachDrag(drag);
c.attachDrag(drag2);
});
</script>
</body>
</html>
kissy的更多相关文章
- Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙
前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...
- Mvc Kissy uploader实现图片批量上传 附带瀑布流的照片墙
前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...
- kissy使用注意事项
使用kissy注意: 下载kissy压缩包后只需要拷贝build包到项目中即可, 样式自己写不用引用. 1.4.x引这个文件seed-min.js1.3.x引kissy-min.js
- 淘宝自己的前端框架KISSY(类似jquery) - 简易指南
KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架. 具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性. 在以下方面具有一定优势: A.拥有大量的中文文档: ...
- KISSY学习笔记（更新中）
序:身为一个JAVA开发工程师,前端代码我尽量是使用原生的JS来写的,或是使用一些JQ的开源组件(但是也只是使用,没有好好去研究过JQ这个框架).目前由于工作需要,必须要使用KISSY,打算借此机会, ...
- CSS初始化-KISSY CSS Reset 1.0
代码 /* KISSY CSS Reset 理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作.清除和重置是紧密不可分的. 2. reset 的目的不是让默认样式在所有浏览器下一致 ...
- 好的组件，无须太复杂 – KISSY Slide 组件简介
KISSY Slide 组件首页:http://gallery.kissyui.com/slide/1.1/guide/index.html V1.1 New Featurs Slide是一个幻灯切换 ...
- KISSY对vm的抽取
vm <script type="text/javascript"> KISSY.use(['bops/js/forced-closure', 'common/js/t ...
- KISSY 库 demo
KISSY 是由淘宝前端project师们发起创建的一个开源 JS 类库. 它遵循的原则是 小巧灵活.简洁有用.愉悦编码.快乐开发. DEMO: <!DOCTYPE html> <h ...
随机推荐
- Ubuntu下安装nvidia显卡驱动
layout: post title: Ubuntu下安装nvidia显卡驱动 date: 2015-10-02 17:19:06 categories: 常用命令 tags: 显卡 驱动 最近一直在 ...
- common头文件
#ifndef COMMON_HHH #define COMMON_HHH #define ASSERT(p) \ do{\ if (!p){\ printf("%s:%d\n", ...
- clang: error: invalid deployment target for -stdlib=libc++ (requires iOS 5.0 or later)
低于5.0版本的不支持设置成 或 在Xcode中做如下配置 静态库工程也要做同样设置
- How Many Shortest Path
zoj2760:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2760 题意:给你一张有向带权图,然后问你最短路径有多少条. ...
- request.getParameter() 、 request.getInputStream()和request.getReader() 使用体会
request.getParameter(). request.getInputStream().request.getReader()这三种方法是有冲突的,因为流只能被读一次.比如:当form表单内 ...
- Android数据存储之文件存储
首先给大家介绍使用文件如何对数据进行存储,Activity提供了openFileOutput()方法可以用于把数据输出到文件中,具体的实现过程与在J2SE环境中保存数据到文件中是一样的. public ...
- bzoj3437
练一下斜率优化 ..] of int64; q,a,b:..] of longint; i,n,h,t,j:longint; function g(j,k:longint):double; var a ...
- css3倒影
使用CSS3制作倒影 img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from ...
- 制作手机浏览器显示格式的HTML页面
最近要推出手机支持访问的HTML页面效果,而这在制作手机页面的过程中状况连连. 主要一下就我制作的工程中所遇的问题说明一下: 1. 改掉HTML页面声明:(以往大部分页面都是HTML4.0的声明) 还 ...
- ngnix 配置
#运行用户 user www-data; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 error_log /var/log ...