<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>拖放</title>
<style type="text/css">
.test1 {
position: absolute;
left:100px;
top:100px;
100px;height:20px;
background:grey;
}
.test2 {
position: absolute;
left:100px;
top:200px;
100px;height:20px;
background:red;
}
.test3 {
position: absolute;
left:200px;
top:300px;
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', '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', '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>