JS implementation of a list contains the Move Down move delete function _javascript skills

Recently done a project, including a list page, for the user experience, the operation is implemented using JS, including in the list to achieve up, down, delete and other functions, the foreground JS, back-end data modification using AJAX, this article is mainly about the front desk JS this piece

First look at the screenshot of the page

Look at its HTML structure, of course, this is related to the foreground cut, the backend program personnel only responsible for writing their own JS this piece, I take our project as an example, look at their cut HTML

<ul class= "Clearfix" > <li class= "courselist" > <div class= "Titdefault clearfix" > <div class= "left Clearfix > <span class= dragbtn ></span><span class= > Content <em class= ContIndex >1< /em>:</span><em title= "2013 overtime" class= "Titdefaultname" >2013 year overtime .txt</em> </div> < Div class= "Mid" >2014/9/24 9:54:00</div> <div class= "right Clearfix" > <a value= "253040" Moveupbtn "href=" javascript:; " ><span class= "Deltit" > Move </span></a> <a value= "253040" class= "movedownbtn" javascript: ;" ><span class= "Deltit" > Move Down </span></a> <a value= "253040" class= "deletebtn" javascript:; " ><span class= "Deltit" > Delete </span></a> </div> </div> </li> <li class= " Courselist "> <div class=" Titdefault clearfix "> <div class=" left Clearfix "> <span class=" DragBtn "> </span><span class= > Content <em class= "Contindex" >2</em>:</span><em title= "use description. txt" class= "titdefaultname" > Usage Instructions .txt</em> </div> <div class= "mid" >2014/9/24 9:54:00</div> <div class= "right Clearfix" > <a value= " 253041 "class=" moveupbtn "href=" javascript:; " ><span class= "Deltit" > Move </span></a> <a value= "253041" class= "movedownbtn" javascript: ;" ><span class= "Deltit" > Move Down </span></a> <a value= "253041" class= "deletebtn" javascript:; " ><span class= "Deltit" > Delete </span></a> </div> </div> </li> <li class= " Courselist "> <div class=" Titdefault clearfix "> <div class=" left Clearfix "> <span class=" DragBtn "> </span><span class= > Content <em class= Contindex >3</em>:</span><em title= Master. txt "class=" titdefaultname "> Master .txt</em> </div> <div class=" mid ">2014/9/24 div> <div class= "right Clearfix" > <A value= "253040" class= "moveupbtn" href= "javascript:;" ><span class= "Deltit" > Move </span></a> <a value= "253040" class= "movedownbtn" javascript: ;" ><span class= "Deltit" > Move Down </span></a> <a value= "253040" class= "deletebtn" javascript:; " ><span class= "Deltit" > Delete </span></a> </div> </div> </li> <li class= " Courselist "> <div class=" Titdefault clearfix "> <div class=" left Clearfix "> <span class=" DragBtn "> </span><span class= > Content <em class= Contindex >4</em>:</span><em title= Sort problems. txt "class=" titdefaultname "> Sort problems .txt</em> </div> <div class=" mid ">2014/9/24 9:54:00</ div> <div class= "right Clearfix" > <a value= "253041" class= "moveupbtn" javascript:; " ><span class= "Deltit" > Move </span></a> <a value= "253041" class= "movedownbtn" javascript: ;" ><span class= "Deltit" > Move Down </span></a> <a value= "253041" class= "deletebtn" javascript:; " ><span class= "Deltit" > Delete </span></a> </div> </div> </li> </ul>

Below we mainly look at the JS code, mainly using the JQ on method to implement, because the list of data has the first time for static (BIND), when the sort of data into dynamic (live), so this structure can only use on the most reasonable, look at the code

<script type= "Text/ecmascript" >
$ (function () {
//Up
$ (". Clearfix"). On ("click", ". Moveupbtn", function () {
var self = $ (this);
var _old = self.closest ("Li.courselist");
var _new = self.closest ("Li.courselist"). Prev ("Li");
if (_new.length > 0) {
var _temp = _old.html ();
_old.empty (). Append (_new.html ());
_new.empty (). append (_temp);
}

});

Move Down
$ (". Clearfix"). On ("click", ". Movedownbtn", function () {
var self = $ (this);
var _old = self.closest ("Li.courselist");
var _new = self.closest ("Li.courselist"). Next ("Li");
if (_new.length > 0) {
var _temp = _old.html ();
_old.empty (). Append (_new.html ());
_new.empty (). append (_temp);
}
});

Delete
$ (". Clearfix"). On ("click", ". Deletebtn", function () {
var self = $ (this);//Current Click event Source Object
Self.closest ("Li.courselist"). Remove ();
});
</script>

After running, the effect is out, this JS does not have to interact with the background of the Ajax method written out, we can according to the specific circumstances.