<!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. python判断用户注册中用户名是否包含非法字符

    class UserRegisterForm(ModelForm): role = forms.IntegerField() check_password = forms.CharField(requ ...

  2. [CF Round #294 div2] E. A and B and Lecture Rooms 【树上倍增】

    题目链接:E. A and B and Lecture Rooms 题目大意 给定一颗节点数10^5的树,有10^5个询问,每次询问树上到xi, yi这两个点距离相等的点有多少个. 题目分析 若 x= ...

  3. 【技术贴】解决127.0.0.1和http://localhost均被拦截跳转到另一个网页

    很艰难的历程. 今天安装一个OA系统,要用到http://127.0.0.1输入完成之后,可以进入安装界面,but,我输入完了之后,自动跳到了129129垃圾网站,艹,我真TM服了,我把本地连接网线都 ...

  4. LA 3904

    一道DP题: 一共有三种砖,1*2,2*1,2*2,然后要你铺满整个n*2的地板,求不重复的铺法数: 方法: 首先计算了不考虑对称的情况,然后计算只考虑对称的情况: 所以结果就是(不考虑对称数+只考虑 ...

  5. EditText的 焦点事件 setOnFocusChangeListener

    实现代码: //光标处在EditText时其内容消失 mInfo = (EditText)findViewById(R.id.old_password); //setOnFocusChangeList ...

  6. 经典的单例模式c3p0来控制数据库连接池

    package com.c3p0.datapools; //数据库连接池  单例模式 import java.sql.Connection; import java.sql.SQLException; ...

  7. 通过jquery-ui中的sortable来实现拖拽排序

    1.引入文件 <script src="{sh::PUB}js/jquery-1.10.1.min.js"></script> <link rel=& ...

  8. bzoj2597

    非常好的网络流题目 首先这里用到了求补集的思想,我们可以先求不满足的三元对的情况 设A-->B代表A赢B 由于最后所有胜负关系都确定,一定是一个完全图,所以任意一个不合法的三元对,单独取出来一定 ...

  9. VM Depot 镜像新增系列III – 社交媒体，内容管理 与 项目协同系统

     发布于 2014-06-30 作者 刘 天栋 对于架设可协同作业的网站平台, Windows  Azure有着得天独厚的优势.这不仅在于其强大的扩展性和安全性,更重要的是 Azure 平台对各类 ...

  10. @repository注解

    Spring的注解形式:@Repository.@Service.@Controller,它们分别对应存储层Bean,业务层Bean,和展示层Bean. @Repository.@Service.@C ...