jqDnR 可拖曳及調整大小 實際執行畫面

jqDnR 是一個輕量級的一個 jQuery 套件，可以讓您的網頁元素可以拖曳並且可以調整元素的大笑，可定義可放大元素的作用區域，也可支援半透明的拖動方式。

使用方法：
首先載入程式所需要的 JavaScript 程式碼
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//jqDnR 主程式
<script src="jqDnR.js" type="text/javascript"></script>

再來在 Header 部分載入CSS 的部分
.jqHandle {
   background: red;
   height:15px;
}
.jqDrag {
  width: 100%;
  cursor: move;
}
.jqResize {
   width: 15px;
   position: absolute;
   bottom: 0;
   right: 0;
   cursor: se-resize;
}
.jqDnR {
    z-index: 3;
    position: relative;
    width: 180px;
    font-size: 0.77em;
    color: #618d5e;
    margin: 5px 10px 10px 10px;
    padding: 8px;
    background-color: #EEE;
    border: 1px solid #CCC;
}

接下來在HTML的部分加上需要調整的網頁元素
<div id="ex" class="jqDnR">
  <div class="jqHandle jqDrag">標題可拖曳部分</div>
  內容的文字
  <div class="jqHandle jqResize"><!--拖曳的可作用區域--></div>
</div>

最後在 JavaScript 的部分加入一下一小段就完成了
$(function() {
  $('#ex').jqDrag('.jqDrag').jqResize('.jqResize');
});


作者網站：http://dev.iceburg.net/jquery/jqDnR/
檔案大小：1 KB
檔案下載：http://dev.iceburg.net/jquery/jqDnR/jqDnR.js
檔案備份：下載