基于redipsdragmin.js拖动排课功能

遇到的问题

1. html中div包裹样式一定要按规定格式&＃xff0c;其中id&＃61;"redips-drag"的div包含了目标区域的table和拖动区域的table&＃xff0c;需要拖动的div上边需要加上class&＃61;“redips-drag”&＃xff0c;不能拖动的div上边加上class&＃61;“redips-mark”

<div class&＃61;"row"><div id&＃61;"main_container"><div id&＃61;"redips-drag"><div id&＃61;"weekTemplateDetail"><div class&＃61;"dayTemplateDetail" id&＃61;"dayTemplateDetail"><table id&＃61;"templateTable" class&＃61;"courseDetail">table>div> div><div id&＃61;"lecturerSubmitInfoDetails"><div id&＃61;"showDetail_div"><table id&＃61;"table1" class&＃61;"table submitInfoTable"><c:choose><c:when test&＃61;"${not empty page.list }"><c:set var&＃61;"temp" value&＃61;"0">c:set><c:set var&＃61;"brCount" value&＃61;"4">c:set><c:choose><c:when test&＃61;"${page.list.size()%brCount &＃61;&＃61; 0}"> <c:set var&＃61;"end" value&＃61;"${page.list.size()/brCount-1}">c:set>c:when><c:otherwise> <c:set var&＃61;"end" value&＃61;"${page.list.size()/brCount}">c:set>c:otherwise>c:choose><c:forEach begin&＃61;"0" end&＃61;"${end}"><tr><c:set var&＃61;"num" value&＃61;"0">c:set><c:forEach var&＃61;"item" begin&＃61;"${temp }" end&＃61;"${temp&＃43;brCount-1 }" items&＃61;"${page.list}"><td class&＃61;"redips-mark"><div class&＃61;"redips-drag submitInfoDetail" id&＃61;"${item.id }" data-timeState&＃61;"${item.timeState }" data-timeZone&＃61;"${item.timeZone }"data-lecturerId&＃61;"${item.lecturerId }" data-itemId&＃61;"${item.itemId }"><span>${item.lecturerName }(${fns:getDictLabel(item.pattern,&＃39;consulting_type&＃39;,&＃39;&＃39;)})span>br><span>${item.itemName }span>br><span>${item.timeZoneStr }span>div>td><c:set var&＃61;"num" value&＃61;"${num&＃43;1 }">c:set>c:forEach><c:if test&＃61;"${num"><c:forEach begin&＃61;"1" end&＃61;"${brCount-num }"><td class&＃61;"redips-mark">td>c:forEach>c:if><c:set var&＃61;"temp" value&＃61;"${temp&＃43;brCount }">c:set>tr>c:forEach>c:when><c:otherwise><tr><td colspan&＃61;"1"><span>暂无没有可预约信息span>td>tr>c:otherwise>c:choose>table><div class&＃61;"row">${page}div>div>div>div>
div>


2. 在做的过程中出现了一个问题&＃xff0c;能拖动相关课程信息&＃xff0c;但是却放不到具体时间段上&＃xff0c;由于本人是做java开发的&＃xff0c;对html和js理解不深&＃xff0c;一直以为是html写的有问题&＃xff0c;后来在官网上找到问题的原因是在css上边&＃xff0c;需要将id&＃61;"redips-drag"的div设置 display&＃61;“table”

#redips-drag {display: table; width: 100%;}


3. 几个主要的js方法

&＃39;use strict&＃39;;let redips &＃61; {}, // redips containerpos &＃61; {}, // initial positions of DIV elementsrd &＃61; REDIPS.drag; // reference to the REDIPS.drag lib// redips initialization
redips.init &＃61; function () {// 初始化rd.init();rd.shift.animation &＃61; true;redips.startPositions();rd.dropMode &＃61; &＃39;multiple&＃39;;// 放下之前做的事件处理&＃xff0c;需要验证是否符合时间段等&＃xff0c;给出提示rd.event.droppedBefore &＃61; function(targetCell){// 比对信息&＃xff0c;是否可以放到此处var re &＃61; checkCanDrop(rd, targetCell);console.log("re&＃61;"&＃43;re);if (!re) {return false;}return confirm(&＃39;确定即进行预约信息设置&＃xff0c;确定进行此操作吗&＃xff1f;&＃39;);}// 放下之后进行的操作rd.event.dropped &＃61; function(targetCell){// ajax 保存操作var re &＃61; dragAjaxSave(rd);console.log("re&＃61;"&＃43;re);// 保存完毕刷新页面左侧table内容//initTemplate();}// 双击进行删除rd.event.dblClicked &＃61; function(){confirmx(&＃39;确定要删除这条数据吗&＃xff1f;&＃39;, function(){if(isParent(rd.obj.id, &＃39;&＃39;)){console.log("执行了删除");deleteTemplate(rd); }else{console.log("没有执行删除"); }})}rd.event.deleted &＃61; function(){}
};// 样例中带的不用修改&＃xff0c;主要用于获取操作div
redips.startPositions &＃61; function () {let divs, id, i, position;divs &＃61; document.getElementById(&＃39;redips-drag&＃39;).getElementsByTagName(&＃39;div&＃39;);for (i &＃61; 0; i < divs.length; i&＃43;&＃43;) {id &＃61; divs[i].id;if (id) {position &＃61; rd.getPosition(divs[i]);if (position.length > 0) {pos[id] &＃61; position;}}}
};redips.toggleAnimation &＃61; function (chk) {rd.shift.animation &＃61; chk.checked;
};// add onload event listener
if (window.addEventListener) {window.addEventListener(&＃39;load&＃39;, redips.init, false);
}
else if (window.attachEvent) {window.attachEvent(&＃39;onload&＃39;, redips.init);
}

4. 由于这个页面没有用到iframe进行布局&＃xff0c;左边和右边的table在同一个页面上&＃xff0c;然而左边和右边表格都涉及到了刷新的问题&＃xff0c;刷新问题采取的方法是ajax带参发送请求&＃xff0c;然后后端拼接html代码&＃xff0c;然后前端进行table替换刷新

下面是完成之后的页面图&＃xff1a;

遗留问题&＃xff1a;如果在rd.event.dropped 函数中&＃xff0c;即执行保存操作&＃xff0c;也执行刷新操作时&＃xff0c;会出现刷新出来的数据不显示当前保存的那一条信息&＃xff0c;再次手动刷新时才会显示&＃xff0c;希望有懂的小伙伴赐教&＃xff0c;不胜感激。