<!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. MySQL安装完可以使用，但是找不到对应的系统服务

    为何我用 mysqld 启动 mysql 的服务后,在系统“服务”中查不到mysql服务呢?首先声明,我的服务启动成功了,因为我可以另开一个 cmd 窗口进行mysql登录,登录后可以进行各种操作.用 ...

  2. Java实现字符串反转

    替换原则:index k 的值和 n-k 的值进行交换.(始终记住程序员的n.k都是字符串的实际位置.) 乘除的最基本实现还是来源于移位操作. public String reverse(String ...

  3. 利用WITH AS 优化FILTER

    SQL> explain plan for select * from fxqd_list_20131115_new where (acct_no, oper_no, seqno, trans_ ...

  4. This configuration file was broken by system-config-keyboard

    posts • Page of problem with startx Postby evarie » // :: Normally i can get started with the x wind ...

  5. touchend事件的preventDefault阻止掉了click事件

    <div id="box">box</div> <script> var isTouchDevice = function() { return ...

  6. 【转】Eclipse中设置ButterKnife进行注解式开发步骤 -- 不错

    原文网址:http://www.bubuko.com/infodetail-974262.html 最近在进行Android注解式开发的学习,正在尝试用ButterKnife.ButterKnife的 ...

  7. JavaScript高级程序设计18.pdf

    系统对话框 alert().confirm()和prompt()调用系统对话框向用户显示消息,显示对话框的时候代码会停止执行,关闭后继续执行 alert()警告提示框 confirm()点击确认返回t ...

  8. 【长篇高能】ReactiveCocoa 和 MVVM 入门

    翻译自ReactiveCocoa and MVVM, an Introduction. 文中引用的 Gist 可能无法显示.为了和谐社会, 请科学上网. MVC 任何一个正经开发过一阵子软件的人都熟悉 ...

  9. java 运行项目不放到tomcat下的webapps文件夹下放到自己建的文件夹中的处理办法

    你需要在tomcat跟目录下的conf/server.xml中进行配置,配置方法如下: <Context path="/Project" docBase="D:\s ...

  10. Java8中Lambda表达式的10个例子

    Java8中Lambda表达式的10个例子 例1 用Lambda表达式实现Runnable接口 //Before Java 8: new Thread(new Runnable() { @Overri ...