Rss - JQuery插件之拖拽 - jdragndrophttp://www.ajaxplaza.net/articles/a6.aspx 使用jdragndrop可以轻松简单的实现任何元素的拖拽效果，更加方便，快捷，使用简单，开发人员易于掌握，并且为用户提供友好，强大的体验。 Copyright by AjaxPlaza 2008-2009zh-cnhttp://www.ajaxplaza.netJQuery插件之拖拽 - jdragndropjerichoJQuery框架/插件使用jdragndrop可以更加轻松的实现元素拖拽效果。

简介：
首先我们在测试页面上新建需要测试拖拽的元素：

XML/HTML Code
  1. <div id="UserList">  
  2.   <div id="ul_top">  
  3.      Drag Handle  
  4.   </div>  
  5.     Drag Me  
  6. </div>  

使用到的样式如下：

CSS Code
  1. body  
  2. {  
  3.  font-size:12px;  
  4.  font-family:Calibri;  
  5. }  
  6. #UserList  
  7. {  
  8.  background-color:#EEFAFF;  
  9.  border:1px solid #BBE1F1;  
  10.  padding:1px;  
  11.  width:200px;  
  12.  height:70px;  
  13.  position:absolute;  
  14.  left:100px;  
  15.  top:20px;  
  16. }  
  17. #ul_top  
  18. {  
  19.  background-color:#FFFFF7;  
  20.  border:1px solid #FFCC00;  
  21.  padding:5px;  
  22.  cursor:move;  
  23.  font-weight:bold;  
  24. }  

效果如下：

为需要拖拽的元素绑定事件：
 

JavaScript Code
  1. $().ready(function() {  
  2.  $("#UserList").Drags({  
  3.     zIndex: 20,  
  4.     opacity: .7,  
  5.     handle: '#ul_top',  
  6.     callback: {  
  7.         onMove: function(e) {  
  8.           $('#droptracer').html('Div Position:(Left:'   
  9.              + e.pageX + ' ,Top:' + e.pageY + ')');  
  10.           },  
  11.         onDrop: function() {  
  12.           $('#droptracer').html('Div has been dopped');  
  13.           }  
  14.     }  
  15.  });  
  16. })  

这样用户就可以拖拽需要拖拽的元素了。
API：
zIndex(Int): 拖拽时拖拽层的z-index属性。
opacity(Float): 拖拽时拖拽层的透明值（提高用户体验）。
handle(String): 拖拽柄（tagId前加上"#"）。
callback(Object): 回调函数，包括：
      onMove(Function): 拖拽时发生的事件。
      onDrop(Function): 拖拽结束时触发的事件。
 

下载此插件[JDRAGNDROP]

此文为Jericho原创,转载或引用请注明作者,可用于任何非商业目的的修改或传播,作者保留最终解释权利(CopyLeft©Jericho 2009)

]]>2009-04-08 21:04http://www.ajaxplaza.net/articles/a6.aspx