JqueryUI实现页面模块拖动原理.doc

Jquery_UI_实现页面模块拖动原理 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head runat=server title/title link href=Styles/jquery-ui-1.10.3.custom.css rel=stylesheet type=text/css / script src=Scripts/jquery-1.9.1.js type=text/javascript/script script src=Scripts/jquery-ui-1.10.3.custom.js type=text/javascript/script script type=text/javascript var startIndex = 6; $(document).ready(function () { //初始化数据 initialData(); //将第一行设置为排序 $(#dvSort1 ul).sortable( { connectWith: #dvSort2 ul } ); //将第二行设置为排序 $(#dvSort2 ul).sortable( { receive: function (event, ui) { startIndex++; resetWord(); }, connectWith: #dvSort1 ul } ); //将第三行设置为可拖放 $(#dvDrag1 ul li).draggable( { helper: clone, connectToSortable: #dvSort2 ul, revert: true } ); }); //重新设置第三排的字母 function resetWord() { var words = []; for (var i = 0; i 3; i++) { var word = String.fromCharCode((65 + (startIndex + i))); words.push(word); } $(#dvDrag1 ul li).each(function (index) { $(this).find(div).eq(0).html(words[index]); }); } //初使化第一、二、三排数据 function initialData() { var words = []; var words2 = []; var words3 = []; for (var i = 0, j = 3, k = 6; i 3; i++) { var word = String.fromCharCode((65 + (i))); var word2 = String.fromCharCode((65 + (i + j))); var word3 = String.fromCharCode((65 + (i + k)))