<!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. Html和JS基础

    1.body:bgcolor,background(背景图片),bgproperities=fixed(图片水印),text(正文颜色). 2.hr:水平分割线,正文标题<h?>自动换行了 ...

  2. DestroyWindow

    假设自己通过new创建了一个窗口对象pWnd,然后pWnd->Create.则销毁窗口的调用次序: 1.       手工调用pWnd->DestroyWindow(): 2.       ...

  3. 【HDOJ】1455 Sticks

    DFS.搜索以棍数为条件循环搜索较好,这样不会超时. #include <stdio.h> #include <string.h> #include <stdlib.h& ...

  4. bzoj2165

    类似于bzoj1706,考虑到楼层是等价的我们令f[p,i,j]为用了2^p次电梯,从房间i到j最多上升了多少层然后从2^p很容易推到2^(p+1),类似于floyd的转移即可下面我们要用最小的电梯次 ...

  5. 【响应式Web设计实践 #BOOK#】

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. PowerDesigner将PDM导出生成WORD文档--温习老知识

    转:http://www.cnblogs.com/wudiwushen/archive/2010/05/13/1734812.html 今天的温习老知识,是如何将一个PD设计的PDM来导出WORD文档 ...

  7. Linux Eclipse代码提示功能设置(Java & C/C++)

    最近在Linux下开发,由于长期使用Visual Studio 2010,对代码提示功能情有独钟,现在在Linux下,使用Eclipse做开发,当然免不了怀念Visual Studio强悍的代码提示, ...

  8. mkfs 的使用

    使用方法: [root@localhost beinan]# mkfs -t 文件系统  存储设备 注:这里的文件系统是要指定的,比如 ext3 :reiserfs :ext2 :fat32 :msd ...

  9. 二：java语法基础：

    1,关键字:其实就是某种语言赋予了特殊含义的单词. 保留字:其实就是还没有赋予特殊含义,但是准备日后要使用过的单词. 2,标示符:其实就是在程序中自定义的名词.比如类名,变量名,函数名.包含 0-9. ...

  10. Unity-layermask的问题

    using UnityEngine; using System.Collections; public class NewBehaviourScript : MonoBehaviour { priva ...