API:
new Draggable(icon, { // 是否使用镜像:false为拖动源对象,true为拖动拷贝镜像对象 ghosting: true, // 是否绝对定位:false为相对于父容器定位 absolute: true, // 是否还原拖动:true为拖动后释放鼠标会还原回原来位置 revert: function(){return true;}, // 还原过程中执行效果 reverteffect: function(element, top_offset, left_offset) { element.setStyle({left:0,top:0}); } });
Droppables.add('drop', {containment: "items",
onDrop: function(element) { alert(element.id); } });
示例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js drag + drop koyoz</title>
<script type="text/javascript" src="xframework/lang.js"></script>
<script type="text/javascript" src="xframework/drag-drop.js"></script>
<style type="text/css">
* {margin:0px;padding:0px;font-size:12px;}
.drop{
width:200px;
height:100px;
border:1px #A5B6C8 solid;
background:#EEF3F7;
padding:10px;
}
.item {width:100px; height:28px;background:#C2ECA7;text-align:center;line-height:28px;cursor:pointer;margin-top:5px;}
#items {margin: 50px 0 0 100px;}
</style>
</head>
<body>
<div id="drop1" class="drop">水果</div>
<div id="drop2" class="drop">气象</div>
<div id="items1">
<div id="item4" class="item">桃子</div>
<div id="item5" class="item">西瓜</div>
<div id="item6" class="item">葡萄</div>
</div>
<div id="items2">
<div id="item1" class="item">风</div>
<div id="item2" class="item">雨</div>
<div id="item3" class="item">雷</div>
<div id="item3" class="item">电</div>
</div>
<script type="text/javascript">
//逐个注册drag事件
var itemx = document.getElementById('items1').getElementsByTagName("div")
itemx.each(function(item){
new Draggable(item, {
ghosting: false
});
});
//逐个注册drag事件
var itemx = document.getElementById('items2').getElementsByTagName("div")
itemx.each(function(item){
new Draggable(item, {
ghosting: false
});
});
//注册放置对象
Droppables.add('drop1', {
containment: "items1",
onDrop: function(element) {
alert(element.id);
}
});
Droppables.add('drop2', {
containment: "items2",
onDrop: function(element) {
alert(element.id);
}
});
</script>
</body>
</html>
所需要的lib: drag-and-drop 1.0:http://www.kuaipan.cn/file/id_14343253738414509.html
lang 1.0: http://www.kuaipan.cn/file/id_14343253738414508.html