基本拖动示例
Source
Output
QRCode
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Draggable 简单使用示例</title>
<link rel="stylesheet" href="//g.alicdn.com/kissy/k/5.0.1/css/base.css">
<link rel="stylesheet" type="text/css" href="assets/box.css">
<style type="text/css">
#test-drag{
position:absolute;
width:150px;
height:100px;
}
/* 设置代理节点样式 */
.ks-dd-proxy {
opacity:0.6;
*filter:alpha(opacity=60);
}
</style>
<script src="//g.alicdn.com/kissy/k/5.0.1/seed-debug.js"></script>
</head>
<body>
<h3>Draggable 简单使用示例</h3>
<div class="box" id="test-drag">
<s class="box-tp"><b></b></s>
<div class="box-hd">
<h3>Drag Me</h3>
</div>
<div class="box-bd">
鼠标拖动
</div>
<s class="box-bt"><b></b></s>
</div>
<script type="text/javascript">
require(['dd', 'dd/plugin/proxy'],function(DD, Proxy, Constrain){
var drag=new DD.Draggable({
node:'#test-drag',
cursor:'move',
move:true
});
//使用proxy插件来跟踪鼠标移动
// drag.plug(Proxy);
});
</script>
</body>
</html>