首页 > 代码库 > kissy
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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。