jQuery對元素進行拖動並重新排序代碼

本文章來給各位同學介紹jQuery對元素進行拖動並重新排序代碼我們像phpwind論壇一樣直接在界面無刷新編輯並保存編輯的數據哦這裡都要基本jquery ajax來操作了

下邊我們一步一步來實現這個功能

 代碼如下 復制代碼

<span id="show">
<div>
    <input id="check" type="數據庫中數據排序進行更改隱藏域保存原來的圖片排列順序ul顯示圖片列表

為了能看得過去稍微加了點樣式

 代碼如下 復制代碼

var show = jQuery("#show"); //輸出提示
var orderlist = jQuery("#orderlist"); //原順序
var check = jQuery("#check");

 //是否更新到        }
        success: function() {
            showhtml("更新成功");
        }
    });
};

接下來將ajax更新塊單獨分出來這樣程序變得比較整潔這塊沒有新東西

 代碼如下 復制代碼

//調用ajax更新方法
var Submit = function(update) {
    var order = [];
    listchildren("li")each(function() {
        orderpush(thisid);
    });
    var itemid = orderjoin();
    //如果單選框選中則更新表中排列順序
    if (update) {
        Update(itemid);
    }
    else {
        showhtml("");
    }
};

和得到排列順序類似將ID組成一個字符串傳遞給了Update()方法函數中的參數update為checkbox是否選中

 代碼如下 復制代碼

//執行排列操作
listsortable({
    opacity:
    update: function() {
        Submit(checkattr("checked"));
    }
});

最後執行排列操作後台部分就是對現在ID對應原來排列順序的更新相信大家並不陌生

From:http://tw.wingwit.com/Article/program/Java/hx/201405/30802.html