XML格式, 便于后期排版方便,每一部分翻译完成之后, 都会在我的博客和http://www.heyjava.com同步更新.
【jquery.ui.droppable中文文档】
event: 浏览器原生的事件
ui: 一个JQuery的ui对象, 其中有以下主要属性
ui.helper: 正在拖动的元素的JQuery包装对象, ui.helper.context可以获取到原生的DOM元素.
ui.position: ui.helper(也就是我们要拖动的元素)相对于父元素(包含自己的元素, 如果是顶层, 对应body)的偏移, 值是一个对象{top, left}----也就是可以用ui.position.top获取到该元素与父元素的top当前偏移
ui.offset: 与ui.position同意, 这里表示的是和浏览器内容区域左上边界的偏移(注意, 是内容区域, 而不是html的body区域.html的body在默认情况下, 各种浏览器中都会相对offset有偏移的.)]]>activate: function(event, ui) { ... }
});
]]>...
});
]]>deactivate: function(event, ui) { ... }
});
]]>$('.selector').bind('dropdeactivate', function(event, ui) {
...
});
]]>$('.selector').droppable({
over: function(event, ui) { ... }
});
]]>$('.selector').bind('dropover', function(event, ui) {
...
});
]]>$('.selector').droppable({
out: function(event, ui) { ... }
});
]]>$('.selector').bind('dropout', function(event, ui) {
...
});
]]>$('.selector').droppable({
drop: function(event, ui) { ... }
});
]]>$('.selector').bind('drop', function(event, ui) {
...
});
]]>
#msg{color: red;
font: 12px;
}
.draggable{ width: 70px;
height: 40px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
.droppable{ width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
}
.ui-state-highlight{background: #88EE88;
}
hover draggable
hover_droppable
]]>
呵呵, 将draggable和droppable结合起来, 就以这个例子作为结束吧. 没有源码中涉及的图标没有的朋友可以去下载, 就是一个文件夹图标, 一个文件图标, 一个回收站图标. 48*48大小的.
body{height: 590px;
background: #EEFFEE;
}
#msg{color: red;
font: 12px;
}
.draggable{width: 48px;
height: 48px;
}
.droppable{width: 150px;
height: 150px;
background: #CCCCFF url(images/recycle.ico) no-repeat 50% 50%;
border: 2px solid green;
margin: 2px 0;
}
.ui-state-highlight{background: #88EE88;
}
.folder{background: url(images/folder.ico) no-repeat 50% 50%;
}
.file{background: url(images/file.ico) no-repeat 50% 50%;
}
.activate{background: #AAEEBB url(images/recycle.ico) no-repeat 50% 50%;
}
.hover{background: #FFFF88 url(images/recycle.ico) no-repeat 50% 50%;
}
文件夹回收站
文件回收站
]]>
推荐阅读
- 针对 jQuery 的优化方法有哪些
- javascript|关于input的change事件触发多次发解决
- jquery Colorbox 传值
- Jquery 操作 Frame示例
- 代码记录|jquery获取select框的值、单选框的值、textarea的值、获取input框的值
- jQuery Infinite Ajax Scroll(ias) 分页插件介绍
- jQuery|jQuery 基础教程目录
- JS|Swiper插件的简单使用
- jquery|总结jQuery/js常用方法