Using jQuery to sort tables by dragging

The principle is to use the mousedown, mouseover, and mouseup events to drag and use Ajax to save the results.

The JS Code is as follows:

MoveStart =; curTr; tarTr; $ ("# tableDataList "). find ("tr "). find ("td: not (: last )"). mousedown (==$ ("td "). addClass ("highlightTd" "pointer" $ ("# tableDataList "). find ("tr "). mouseover (ch = "input [type = 'checkbox']" (moveStart = & curTr. find (ch ). attr ("subid ")! = $ (). Find (ch ). attr ("subid" (curTr. offset (). top> $ (). offset (). top) {tarTr =$ ($ ("# tableDataList "). find ("tr "). mouseup (moveStart = "td "). removeClass ("highlightTd" "pointer" subjectIds = ""; $ ("# tableDataList "). find ("input [type = 'checkbox'] [id! = 'Checkall'] "). each (+ = $ (). attr (" subId ") +", "(subjectIds! = "" POST "" # {ChangeSubjectsSortUrl} "" subjectIds = "+ subjectIds. substr (0, subjectIds. length-1), success: (data = "OK" I = 0 "# tableDataList "). find ("tr: not (: first )"). each (++ ). find ("td: eq (3)" developer.html (I); </script>View Code

The HTML code is as follows (Note: The Framework automatically sets <! -- BEGIN list --> and <! -- END list --> ):

Question preview questionnaire add question name question type question sequence question score operation # {edu_QnSubject.Title} modify and deleteView Code

The Controller code is as follows:

ChangeSubjectsSort (subjectIds = ctx. post ([] subjectIdArray = subjectIds. split (I =; I <subjectIdArray. length; I ++ = edu_QnSubjectService.findById <Edu_QnSubject> (= I + = edu_QnSubjectService.update (qnSubject );View Code

(Static images do not show dynamic effects. Here we will show you ):