使用jdragndrop可以更加轻松的实现元素拖拽效果。
简介：
首先我们在测试页面上新建需要测试拖拽的元素：
XML/HTML Code
- <div id="UserList">
- <div id="ul_top">
- Drag Handle
- </div>
- Drag Me
- </div>
使用到的样式如下：
CSS Code
- body
- {
- font-size:12px;
- font-family:Calibri;
- }
- #UserList
- {
- background-color:#EEFAFF;
- border:1px solid #BBE1F1;
- padding:1px;
- width:200px;
- height:70px;
- position:absolute;
- left:100px;
- top:20px;
- }
- #ul_top
- {
- background-color:#FFFFF7;
- border:1px solid #FFCC00;
- padding:5px;
- cursor:move;
- font-weight:bold;
- }
效果如下：
为需要拖拽的元素绑定事件：
JavaScript Code
- $().ready(function() {
- $("#UserList").Drags({
- zIndex: 20,
- opacity: .7,
- handle: '#ul_top',
- callback: {
- onMove: function(e) {
- $('#droptracer').html('Div Position:(Left:'
- + e.pageX + ' ,Top:' + e.pageY + ')');
- },
- onDrop: function() {
- $('#droptracer').html('Div has been dopped');
- }
- }
- });
- })
这样用户就可以拖拽需要拖拽的元素了。
API：
zIndex(Int): 拖拽时拖拽层的z-index属性。
opacity(Float): 拖拽时拖拽层的透明值（提高用户体验）。
handle(String): 拖拽柄（tagId前加上"#"）。
callback(Object): 回调函数，包括：
onMove(Function): 拖拽时发生的事件。
onDrop(Function): 拖拽结束时触发的事件。
下载此插件[JDRAGNDROP]