School timetable is example of how to use REDIPS.drag library. Page layout contains two tables – left table with school subjects and timetable on the right. After subject is placed to timetable, button in the same color will be displayed next to the subject (clone object).
The following code shows event.dropped() event handler (with logic for cloning DIV elements across a week).
rd.event.dropped = function () {
var objOld = rd.objOld, // original object
targetCell = rd.td.target, // target cell
targetRow = targetCell.parentNode, // target row
i, objNew; // local variables
// if checkbox is checked and original element is of clone type
// then clone spread subjects to the week
if (document.getElementById('week').checked === true &&
objOld.className.indexOf('clone') > -1) {
// loop through table cells
for (i = 0; i < targetRow.cells.length; i++) {
// skip cell if cell has some content
// (first column is not empty because it contains label)
if (targetRow.cells[i].childNodes.length > 0) {
continue;
}
// clone DIV element
objNew = rd.cloneObject(objOld);
// append to the table cell
targetRow.cells[i].appendChild(objNew);
}
}
// print message only if target and source table cell differ
if (rd.td.target !== rd.td.source) {
printMessage('Content has been changed!');
}
// show / hide report buttons
reportButton();
};
Source code (including school timetable with save/recall table using PHP and MySQL) and detailed description of library can be found on Drag and drop table content with JavaScript.
@Sudeep – please pay attention to checkbox in the upper left corner of timetable. If checkbox is checked then DIV element will be cloned across whole week. Hope this functionality is what you looking for …
@dbunic – Thanks, that is exactly what I was looking for. Missed it originally. Awesome stuff here – very well compiled !
Hi there, Is it possible to make drag into a class? Thanks!
Hi again, I have one other question. I have a table that I have created using spry, that pulls in some data from an xml file. The code seems to clash when inside the ‘drag’ div.
The dragging ability disappears when nested inside drag div for some reason – Are there known issues with spry?? Im just putting together a very basic version onto my site to illustrate the issue.
Thanks mate,
Richard
@Rich – I’m not sure what you mean by making drag into a class. Can you give a little bit more details …
Regarding spry – maybe the problem is in dynamically loading content to the HTML table. If so, you should run REDIPS initialization after that to rescan new table state. Maybe DIV element lost attached onmousedown event handler and dragging ability disappears. That’s only guessing and any example that can illustrate the problem will be welcomed.
Thanks for your reply Dbunic. I have put up an example here: http://richyobrien.com/testBoard/tableTest2.html
This line of code seems to be the culprit. If I remove spry:region=”ds1″ functionality is restored.
Nevermind the class question, I had just confused myself there while trying something that you had already answered in a previous exmaple. :)
Thanks again!
Rich
@Rich – Hi, it seems that spry somehow overwrite DIV elements after REDIPS initialization. Please try this lines:
var ds1 = new Spry.Data.XMLDataSet("data2.xml", "customers/customer",{sortOnLoad:"lot" ... var ds1 = new Spry.Data.XMLDataSet("data2.xml", "customers/customer",{sortOnLoad:"tag" ... var ds1 = new Spry.Data.XMLDataSet("data2.xml", "customers/customer",{sortOnLoad:"sire" ... var ds1 = new Spry.Data.XMLDataSet("data2.xml", "customers/customer",{sortOnLoad:"dam" ... ds1.setColumnType("lot", "number"); ds1.setColumnType("tag", "number"); ds1.setColumnType("sire", "string"); ds1.setColumnType("dam", "number");move inside window.onload to look like this:
window.onload = function () { var ds1 = new Spry.Data.XMLDataSet("data2.xml", "customers/customer",{sortOnLoad:"lot" ... var ds1 = new Spry.Data.XMLDataSet("data2.xml", "customers/customer",{sortOnLoad:"tag" ... var ds1 = new Spry.Data.XMLDataSet("data2.xml", "customers/customer",{sortOnLoad:"sire" ... var ds1 = new Spry.Data.XMLDataSet("data2.xml", "customers/customer",{sortOnLoad:"dam" ... ds1.setColumnType("lot", "number"); ds1.setColumnType("tag", "number"); ds1.setColumnType("sire", "string"); ds1.setColumnType("dam", "number"); // initialization REDIPS.drag.init(); ... ...I’ll keep my fingers crossed. If the problem will still exist then I will look further.
Cheers!
Thank you for your help!
Unfortunately this doesn’t seem to work. This is probably a fairer representation of what I am trying to achieve http://www.richyobrien.com/testBoard/tb4.html It is very similar to the first example I gave, but once I update the xml the ‘auction’ board automatically updates. Again it is the “spry:detailregion=”dsAuctionData dsOne” which causes the issue. In both instances the error “Failed to retrieve data set (dsOne) for spry:repeat ” is returned.
Thanks mate, your help and time is very much appreciated.
OK, I think you should define observer to the region with onPostUpdate notification. This observer should run REDIPS initialization instead of window.onload. I will suggest to modify window.onload to normal JavaScript function. For example rename it to “redips_drag”. Next (only for testing purpose) place a button to your page with onclick event to fire “redips_drag” function. Reload the page and try dragging. Dragging will not work. Next, click on the button and dragging should work.
The same scenario will be with observer function. Observer will start “redips_drag” after region has regenerated its code and inserted it into the document.
Please see details how to attach observer at the bottom of Working with Spry XML Data Sets. Just search for addObserver() in “Region observer notifications”.
Hope this will help.
Sorry, I forgot to mention that you move out your lines out of window.onload as it was in previous case.
Great!! Thank you! I have only had a quick moment to play with it so far, but it looks like you were bang on :) I am swinging above my weight a bit with this project, but I’m learning some fantastic things.
Cheers,
Rich
I need to use “position:fixed” for the destination table – so it won;t scroll off the screen when I have a large list of fields. When I try it kills the drag function. Is it possible?
@Howiw Wolowitz – In latest redips2.tar.gz package you can find example 10 – sticky tables. Hope this is what you are looking for …
Excuse my ignorance but is there anyway to drag a Subject and drop it in to multiple adjacent timeslots, i.e. drag Physics in to Wednesday 9:00 and 10:00 without having to select Physics twice from the Subject list?
@Andrew – REDIPS.drag library focuses only one target cell. In a moment when user releases mouse button, myhandler_dropped() can perform some additional work – like placing subject across whole week or placing subject to 9:00 and 10:00. On the other hand, you can enable cloning elements with CTRL key:
So, after element is dropped to the Wednesday 9:00, you can press CTRL key and click with left mouse button on the previously dropped element. Instead of moving, element will be cloned immediately – not needed to drag new element from Subject list. To enable cloning with CTRL key, place REDIPS.drag.clone_ctrlKey line after initialization. You can peek to the source of index.html in example 5 to see how to enable CTRL cloning.
Thanks for that, the CTRL cloning works great, one more thing is it possible to find the Row and Column of the target cell, as I want to pass this info to another window so as I can add extra information such as teacher/classroom etc.
Forgive my ignorance has I’m really just a COBOL programmer!
@Andrew – No problem. If you need to know row and column of DIV element in a moment of dropping, you can use myhandler_dropped() event handler:
REDIPS.drag.myhandler_dropped = function () { // define current row and current cell var ri = REDIPS.drag.current_cell.parentNode.rowIndex, ci = REDIPS.drag.current_cell.cellIndex; // display current row and current cell document.getElementById('message').innerHTML = 'Dropped: ' + ri + ' ' + ci; }On the other hand, if you want to accept row and column index of DIV elements on server side – PHP page, please see foreach loop in save.php (save.php is placed in example03 directory of redips2.tar.gz package).
Hi, I love this tutorial and I would do a button which can help me to check which row and cell is having what clone. Below is my coding
function check() { if (document.getElementById('aaa') == null) { var msg = "null"; alert(msg); } else { var msg = "not null"; alert(msg); } }My coding only will come with alert message “not null”, but I didn’t not put any clone in the first cell, it should come out “null” as the alert message. Hope you can help me, thank you.
@arzozeus – Your code will search for element with id=”aaa” on DOM document regardless to the element position. If you are interested for content of the first table cell, maybe you can set ID to the first cell (like id=”first_cell”) and search for DIV elements beneath that element:
// search for div elements in first table cell var content = document.getElementById('first_cell').getElementsByTagName('div'); // if content exists if (content.length > 0) { ... ...On the other hand, if you want to scan whole table for dropped content then upper solution is not so appropriate. Please take a look save_content() function inside redips-drag.js and you will see how to scan table content with several “for” loops.
Thanks for sharing this work, it’s exactly what I’ve been looking for. When using this example, and adding even more days (11 in total), it isn’t possible to drop the subjects on the “new” days. Is there some limitation built into the code which doesn’t allow to use more cols than five?
@Havard – No, there isn’t any kind of limitation but tables should be contained inside DIV id=”drag”. My guess is that size of dragging area is smaller then your tables. Please try to make dragging area visible (just define border style):
#drag {border: 1px solid lime;}
If that’s the case, you will only have to increase size of DIV (with width and height properties) and the problem will go away.