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

最新文章

热门文章
