Comments on: JavaScript Drag and Drop example 2

By: dbunic

dbunic — Wed, 07 Sep 2011 12:17:57 +0000

@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):

// remove child from DOM (node still exists in memory)
obj.parentNode.removeChild(obj);

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:

// append removed object to the source table cell
tables[table_source].rows[row_source].cells[cell_source].appendChild(obj);

Hope this short info will be helpful to you. Cheers!

By: Steve

Steve — Tue, 06 Sep 2011 20:50:05 +0000

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

By: dbunic

dbunic — Thu, 01 Sep 2011 15:34:10 +0000

@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.

By: bk

bk — Wed, 31 Aug 2011 15:41:14 +0000

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

By: dbunic

dbunic — Sun, 27 Mar 2011 09:36:57 +0000

@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 ...

By: shashi

shashi — Wed, 23 Mar 2011 07:35:01 +0000

hi, i need the simple example of drag and drop the colors or arranging the alpha

By: arzozeus

arzozeus — Mon, 28 Feb 2011 08:44:14 +0000

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?

By: dbunic

dbunic — Sun, 07 Nov 2010 11:32:20 +0000

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.

By: douliu

douliu — Sun, 07 Nov 2010 08:59:35 +0000

How data is automatically down to the right grid

By: sagar varule

sagar varule — Fri, 09 Apr 2010 07:31:34 +0000

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 .....