<!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的更多相关文章

  1. Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙

    前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...

  2. Mvc Kissy uploader实现图片批量上传 附带瀑布流的照片墙

    前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...

  3. kissy使用注意事项

    使用kissy注意: 下载kissy压缩包后只需要拷贝build包到项目中即可, 样式自己写不用引用. 1.4.x引这个文件seed-min.js1.3.x引kissy-min.js

  4. 淘宝自己的前端框架KISSY(类似jquery) - 简易指南

    KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架. 具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性. 在以下方面具有一定优势: A.拥有大量的中文文档: ...

  5. KISSY学习笔记（更新中）

    序:身为一个JAVA开发工程师,前端代码我尽量是使用原生的JS来写的,或是使用一些JQ的开源组件(但是也只是使用,没有好好去研究过JQ这个框架).目前由于工作需要,必须要使用KISSY,打算借此机会, ...

  6. CSS初始化-KISSY CSS Reset 1.0

    代码 /* KISSY CSS Reset 理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作.清除和重置是紧密不可分的. 2. reset 的目的不是让默认样式在所有浏览器下一致 ...

  7. 好的组件，无须太复杂 – KISSY Slide 组件简介

    KISSY Slide 组件首页:http://gallery.kissyui.com/slide/1.1/guide/index.html V1.1 New Featurs Slide是一个幻灯切换 ...

  8. KISSY对vm的抽取

    vm <script type="text/javascript"> KISSY.use(['bops/js/forced-closure', 'common/js/t ...

  9. KISSY 库 demo

    KISSY 是由淘宝前端project师们发起创建的一个开源 JS 类库. 它遵循的原则是 小巧灵活.简洁有用.愉悦编码.快乐开发. DEMO: <!DOCTYPE html> <h ...

随机推荐

  1. 改善 ASP.NET MVC 代码库的 5 点建议

    MVC,建议 刚刚检查完支持工单中的一些代码,笔者想针对 ASP.NET MVC 应用的改进写一些建议.这些内容仍在笔者脑海中,愿与各位一同分享.若你已使用 MVC 一段时间,那么以下内容可能并不新鲜 ...

  2. 【POJ1021】Intervals （最短路解差分约束）

    题目: Sample Input 5 3 7 3 8 10 3 6 8 1 1 3 1 10 11 1 Sample Output 6 题意: 我们选数,每个数只能选一次.给定n个条件[ai,bi]和 ...

  3. Junit4学习笔记

    一.初始化标注 在老Junit4提供了setUp()和tearDown(),在每个测试函数调用之前/后都会调用. @Before: Method annotated with @Before exec ...

  4. leetcode面试准备:Count Complete Tree Nodes

    1 题目 Given a complete binary tree, count the number of nodes. In a complete binary tree every level, ...

  5. Node.js权威指南 (4) - 模块与npm包管理工具

    4.1 核心模块与文件模块 / 574.2 从模块外部访问模块内的成员 / 58 4.2.1 使用exports对象 / 58 4.2.2 将模块定义为类 / 58 4.2.3 为模块类定义类变量或类 ...

  6. 【转】Android应用程序完全退出

    原文网址:http://www.yoyong.com/archives/199 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://s ...

  7. 【转】MongoDB资料汇总专题

    1.MongoDB是什么 MongoDB介绍PPT分享 MongoDB GridFS介绍PPT两则 初识 MongoDB GridFS MongoDB GridFS 介绍 一个NoSQL与MongoD ...

  8. 关于fixed-point

    今天又出现了shader的问题,编译到真机效果就没了,后来仔细还是因为浮点数精度的问题,后来仔细查找了些资料,才发现自己太粗心,没有看清楚 fixed-point 数据类型就乱用,这是个范围在 [-1 ...

  9. Bzoj 2705: [SDOI2012]Longge的问题 欧拉函数,数论

    2705: [SDOI2012]Longge的问题 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 1959  Solved: 1229[Submit][ ...

  10. KiCad中层定义

    5.2.1. Paired layers The Adhesives layers (Copper and Component):    These are used in the applicati ...