This post shows how to use Drag and Drop library described in my previous post Drag and drop table content with JavaScript. HTML table is stylized to have left column with content, main table and message line. Elements on the left side (green and orange) should be placed to the coloured table cells. After elements are correctly sited, appropriate message will be displayed. Please try ...
|
Green
|
||||||
|
Orange
|
||||||
| Set green and orange elements to the green and orange cells, respectively. | ||||||
Now follows HOWTO. First step is to include Drag and drop library from redips2.tar.gz package. Package contains source code (well commented) and compressed file redips-drag-min.js ready for production.
<script type="text/javascript" src="/my/redips-drag-min.js"></script>
And the second step is to initialize / configure REDIPS.drag library. Only initialization is mandatory (other properties will have default values). You can see how to define destination table cells for green and orange elements. It's possible to define destination cells for each dragged element. At the beginning, left column contains green and orange elements with id="green" and id="orange". This elements are defined to clone two elements. Cloned elements will get id greenc0 / greenc1 and orangec0 / orangec1.
window.onload = function () {
var num = 0, // number of successfully placed elements
rd = REDIPS.drag; // reference to the REDIPS.drag class
// initialization
rd.init();
// set hover color
rd.hover_color = '#9BB3DA';
// define green elements for green cells
rd.mark.exception.green = 'green_cell';
rd.mark.exception.greenc0 = 'green_cell';
rd.mark.exception.greenc1 = 'green_cell';
// define orange elements for orange cells
rd.mark.exception.orange = 'orange_cell';
rd.mark.exception.orangec0 = 'orange_cell';
rd.mark.exception.orangec1 = 'orange_cell';
// this function (event handler) is called after element is dropped
rd.myhandler_dropped = function () {
var msg; // message text
// if the DIV element was placed on allowed cell then
if (rd.target_cell.className.indexOf(rd.mark.exception[rd.obj.id]) !== -1) {
// make it a unmovable
rd.enable_drag(false, rd.obj.id);
// increase counter
num++;
// prepare and display message
if (num < 6) {
msg = 'Number of successfully placed elements: ' + num;
}
else {
msg = 'Well done!';
}
document.getElementById('message').innerHTML = msg;
}
};
};
REDIPS.drag library contains 25 event handlers to place custom JavaScript code:
- myhandler_clicked
- myhandler_dblclicked
- myhandler_moved
- myhandler_notmoved
- myhandler_dropped
- myhandler_dropped_before
- myhandler_switched
- myhandler_changed
- myhandler_cloned
- myhandler_cloned_dropped
- myhandler_clonedend1
- myhandler_clonedend2
- myhandler_notcloned
- myhandler_deleted
- myhandler_undeleted
- myhandler_row_clicked
- myhandler_row_moved
- myhandler_row_notmoved
- myhandler_row_dropped
- myhandler_row_dropped_source
- myhandler_row_changed
- myhandler_row_cloned
- myhandler_row_notcloned
- myhandler_row_deleted
- myhandler_row_undeleted
In this example you can see how to use myhandler_dropped() event handler and how to test if element is dropped to the allowed table cell. Example also shows how to define single content table cell on the globally defined "multiple" drop option. Single content cells are in the corners of the main table, while "multiple" is default option and it hasn't be defined explicitly. Hope this post will give some ideas of how to use Drag an Drop library.
very cool & good js code, thank you very much for sharing.
Can you share this update on my JavaScript library?
Awaiting your response. Thanks
I will gladly post update to your JS library site ...
Excellent Code!
PS: Where's my badge?
Hi,
love this example. How would you edit this code so that the dragabble element can be cloned an infinite number of times?
@Marc Love - Please see "School timetable" JavaScript Drag and Drop example 3. Left table contains school subjects with infinity cloning possibility.
Hi...I have use your Example work very Well....But only one feature reuired is tht the controls of the two adjacent should be swapped ...
Suppose i have table with column 2 and i drag coloumn2 element to column1 thn both should swapp there position..
Plzzz Help me out with this .....
How data is automatically down to the right grid
If I understood your question you want to know how script finds (highlights) current table cell position. Well, position of dragged element is compared with stored informations of table cell bounds. In the initialization phase, script scans tables and creates array with row positions. It wasn't possible to attach onmouseover event handler to the table calls because events weren't never activated. Dragged element took onmouseover event for himself. Anyway, after applying "array" logic, REDIPS.drag library works pretty good.
Hi, if I want to change background color to another color like red or green, when I drag to the green cell or orange cell?
hi, i need the simple example of drag and drop the colors or arranging the alpha
@arzozeus - In a moment when element is dropped to the table cell, you can write a code in myhandler_dropped() to change background color of target table cell. target_cell reference is defined in onmouseup and visible in myhandler_dropped() event handler.
@shashi - Can you give me a little more details about color example you need. Alpha component of DIV elements in this example is defined in CSS:
opacity: 0.7;
filter: alpha(opacity=70);
If this is what you're looking for ...
Hi!
I found these examples through Google... I am building my own CMS system and I think I could use your drag'n'drop scripts. I would need them for my content designer. The idea is that the user separately creates web-parts, and them combine multiple web-parts into web-page.
I would have predefined HTML table layouts stored is MySQL database - it cells would be my target area. Somewhere on the right would be a list of possible web-parts (also stored in MySQL database). User would then drag'n'drop these web-parts to some cell and press save button. I could then store this page layout (with content) in the database in the following format:
web-part 1
web-part 2
web-part 3
web-part 4
Do you think this is possible with your script?
Thanks&KR, bk
@bk - Yes it is possible. Table layout (I mean page layout) can be saved in database. When user selects certain type of page layout, table within drag container will be generated (I suppose) with PHP. After table and elements on the right are displayed, user can drag elements to the table cells. You can save table content on button or on element drop. Something similar to the "School timetable" in example03 directory. If you will need further assistance, please feel free to contact me.
First, I have to say that this is wonderful tool. It is very robust and so far ease to work with.
However, I am just not sure how to get the delete/undelete to work. Or more specifically the undelete. I just am not seeing how your example code is restoring the item back to its original cell when cancel is selected on the trash_ask pop up. Any help would be greatly appreciated.
Thanks,
Steve
@Steve - In a moment when element is dropped to the Trash cell, DIV element is deleted from DOM. Please find the following lines in redips-drag.js file (line 975):
Browser will delete DIV element but element will still exist in memory. It is only important to remeber reference to the delete element. If user decides to cancel element deletion, element can be appended to the previous table cell (or any other element in DOM). Here is how:
Hope this short info will be helpful to you.
Cheers!