Pages

0

JQuery 拖曳清單排序 plugin


點選上面這張圖片就可以看到效果~

這是我自製的 jquery plugin，
主要對清單做拖曳的互換排序，
並且還針對不同流覽器對於 margin 的定義不同進行瀏覽器判斷，
要不是我現在還不熟悉 cookie 的寫法，
就應該可以做出記錄位置的效果了，
需要套用來玩玩看的人也可以自行下載測試囉~
這個 plugin 主要套用在 ul 上，
下載下方兩個檔案即可開使套用，
oxxo_dropListBox_v1.js 下載 (右鍵另存新檔)
oxxo_dropListBox_v1.css 下載 (右鍵另存新檔)

使用前請將你的 ul 做 id 的命名，
再將 plugin 套用上您命名好的 ul 上，
針對以下的屬性做設定，
記得最後一個屬性是沒有逗號的，不然會有錯誤~
showBorderWidth : 5,           // 點選後可拖曳的div外框寬度
showBorderStyle : "solid",     // 點選後可拖曳的div外框樣式
showBorderColor : "#f00",      // 點選後可拖曳的div外框顏色
listFloat : "oxxoLeftList",    // 清單屬性：oxxoleftList 可橫向排列, oxxoNormalList 基本綜向排列
divBorderWidth : 2,            // 畫面上div的邊框寬度，若要無邊框則設為0
divBorderStyle : "solid",      // 畫面上div的邊框樣式
divBorderColor : "#000",       // 畫面上div的邊框顏色
divMargin : 5,                 // 畫面上div的外圍邊界值
divWidth : 50,                 // 畫面上div的寬度
divHeight : 50,                // 畫面上div的高度
divCursor : "move",            // 畫面上div的游標樣式
fontSize : "30px",             // 畫面上div的字體大小
fontAlign : "center",          // 畫面上div的內容文字是否水平置中
divOutBorderWidth : 1,         // 移動後出現的虛構div邊框樣式，若要無邊框則設為0
divOutBorderStyle : "dashed",  // 移動後出現的虛構div邊框樣式
divOutBorderColor : "#aaa",    // 移動後出現的虛構div邊框樣式
divOutBg : "#f5f5f5"           // 移動後出現的虛構div

完整 html 碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>jquery oxxo-droplistbox plugin</title>
   <link href="plugin/oxxo_plugin/oxxo_dropListBox_v1.css" type="text/css" rel="Stylesheet" />
   <style>
    body{margin:50px;}
    #test{width:250px;}
   </style>
   <script src="jquery-1.7.1.min.js"></script>
   <script src="plugin/oxxo_plugin/oxxo_dropListBox_v1.js"></script>
   <script>
    $(function(){
     $("#test").droplist({
      showBorderWidth : 5,                 // 點選後可拖曳的div外框寬度
      showBorderStyle : "solid",           // 點選後可拖曳的div外框樣式
      showBorderColor : "#f00",            // 點選後可拖曳的div外框顏色
      listFloat : "oxxoLeftList",          // 清單屬性：oxxoleftList 可橫向排列, oxxoNormalList 基本綜向排列
      divBorderWidth : 2,                  // 畫面上div的邊框寬度，若要無邊框則設為0
      divBorderStyle : "solid",            // 畫面上div的邊框樣式
      divBorderColor : "#000",             // 畫面上div的邊框顏色
      divMargin : 5,                       // 畫面上div的外圍邊界值
      divWidth : 50,                       // 畫面上div的寬度
      divHeight : 50,                      // 畫面上div的高度
      divCursor : "move",                  // 畫面上div的游標樣式
      fontSize : "30px",                   // 畫面上div的字體大小
      fontAlign : "center",                // 畫面上div的內容文字是否水平置中
      divOutBorderWidth : 1,               // 移動後出現的虛構div邊框樣式，若要無邊框則設為0
      divOutBorderStyle : "dashed",        // 移動後出現的虛構div邊框樣式
      divOutBorderColor : "#aaa",          // 移動後出現的虛構div邊框樣式
      divOutBg : "#f5f5f5"                 // 移動後出現的虛構div背景色
     });
    });
   </script>
  </head>
  <body>
   <ul id="test">
    <li><div class="droplistDiv" style="background-color:#FF9900;">1</div></li>
    <li><div class="droplistDiv" style="background-color:#66CCFF;">2</div></li>
    <li><div class="droplistDiv" style="background-color:#FF99FF;">3</div></li>
    <li><div class="droplistDiv" style="background-color:#FFFF99;">4</div></li>
    <li><div class="droplistDiv" style="background-color:#66FF99;">5</div></li>
    <li><div class="droplistDiv" style="background-color:#33CCFF;">6</div></li>
    <li><div class="droplistDiv" style="background-color:#99FF00;">7</div></li>
    <li><div class="droplistDiv" style="background-color:#99FFFF;">8</div></li>
    <li><div class="droplistDiv" style="background-color:#00CCFF;">9</div></li>
   </ul>
  </body>
</html>

如果要改變 div 的內容或是不同大小，
只要在 droplistDiv 內加入內容，
或是塞入其他的 div 就可以，
至於每個 div 顏色的部分目前只是方便判別才家的，
自行把 droplistDiv 的 style 拿掉即可，
但是 sroplistDiv 的 class 就別拿掉，也別改名字喔~
目前自己的測試，如果塞入圖片，
在 chrome 會有拖曳上的問題，
因此若要塞入圖片，可使用 div 背景圖的做法，就可以解決囉~

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

沒有留言:

張貼留言