Example shows dragging functionality across scrollable DIV containers. If DIV container is bigger then displayed size, approaching element near to the edge will start to auto-scroll. Other dragging examples are placed in Drag and Drop section.
|
A
|
||
|
B
|
|
|
C
|
||||
The whole magic lies in changing style position declaration. If position declaration isn't defined then element has default static style position. So, when DIV elements is clicked with left mouse button nothing will happen until element starts to move. In that moment, script will change style position from static to fixed. This change will take out DIV element from the normal flow of the page and positioned at the desired coordinates (relative to the browser window). Element will stay at that position regardless of scrolling - and that's desired effect.
Position style has four values: static, relative, absolute, and fixed. Their explanation can be read on very good site http://www.quirksmode.org/css/position.html - it's definitely recommended to visit.
For the first visitors
Example 6 (scrollable and fixed DIV containers) is based on REDIPS.drag library. Please visit Drag and drop table content with JavaScript where you will find more details, comments and source package to download.
Darko,
I want to use your drag and drop for generating math tests. I want to take specific asp pages which are questions and have the user drag and drop them with the snap to grid like your worksheet.
Just like your example 6. Where I would have questions in "A" and drag them to a placeholder page next to it.
Thanks,
Tim
@Tim - Preparing demo with questions will not be a problem. First step is to place a DIV drag container and include tables (needed for grid).
So, if you have some basic HTML skills, this will be easy task. Next, load REDIPS.drag library, place DIV elements and dragging will start to work.
Any other "page logic" can be accomplished with using of event handlers. "Shool timetable" is a good example to see how to use event handlers.
Just to mention, here is a list of event handlers (hooks):
myhandler_clicked
myhandler_moved
myhandler_notmoved
myhandler_dropped
myhandler_switched
myhandler_changed
myhandler_cloned
myhandler_clonedend1
myhandler_clonedend2
myhandler_notcloned
myhandler_deleted
myhandler_undeleted
Thx for that script. It works fine for me with a fix div-height. But with dynamic sizing of div/table-cells it would not use the single/switching/... dnd-restriction. In this case, it places more than one div-element in one table-cell and destroy the ordering of all other cells.
I mean, thats a bug
I was trying to use example 14 (sorting) with FF4 and no fix div-height.
@Chris - I'm preparing example16 with dynamic DIV height and I didn't notice any problem. You can see the source on https://github.com/dbunic/REDIPS_drag ... Anyway if you can send/show me the script with described bug I would be very grateful. Thanks!
Thanks for scripts and those are great. I started preparing a weekly planner (7 days) based on your example03 coding. I find it's ok with safari and FF browsers but not with IE7.
Cold you suggest me a remedy.
Thanks
Hi, I was looking for drag and drop of rows and the tables. Is there anything that helps ?
Ex:
Group One
- Participant One
- Participant Two
Group Two
- Participant Three
- Participant Four
Here I want to change the order of groups and also be able to drag the participants to other groups.
@ASilva - Your comment was somehow lost - sorry for a late reply to your question. Anyway, all REDIPS.drag examples are tested with IE8 browser. IE7/IE6 are no longer supported ...
@Nivedita - I think that exampe19 "Groups and table rows" from redips2.tar.gz package will best suit. Please download latest package and try. Hope this is what you're looking for.
Cheers!
Hi,
Hope you are doing great, I have a problem in IE8. Problem is that the animation speed is very slow in IE8. This is happening only in IE8, In any other browser the animation is working fine.
Please help me into this.
Thanks In Advance.
@Vikas Saini - All examples in redips2.tar.gz are tested in IE8 and I didn't notice any significant performance problems (small and medium size of tables). How big (I mean number of cells) are your HTML tables? Unfortunately, it seems that IE8 JavaScript engine wasn't in focus when Microsoft designed IE8 browser. Comparing to other browsers, IE8 JavaScript engine is one of the slowest and I'm afraid there's nothing I can do. I made a SunSpider benchmark and IE8 had 10x slower score then latest Google Chrome browser.