0

Hope you are doing fine there i discovered your drag and drop library which is so amazing and helpful but O was stuck in minor issue can you please help me out.

Here is issue:

When I have large item in table data (td) so it acquire space vertically in table like image have 40px height then it occupie two table cells vertically.

Othere >> image have 70px height then it occupie three table cells vertically.

I hope you understand, here is the link of my current code: https://jsfiddle.net/vijaysolankiii/tyrm6uv1/12/

Thanks in Advance

<div id="main-container">           
    <div id="redips-drag">  
        <!-- left container -->
        <div id="left">
            <table id="table1">
                <colgroup>
                    <col width="100"/>
                </colgroup>
                <tbody>
                    <!-- clone 2 elements + last element -->
                    <tr>
                        <td class="dark"><div id="e" class="redips-drag redips-clone orange">Drag  1</div></td>
                        <td class="dark"><div id="f" class="redips-drag redips-clone green">Drag  2</div></td>
                        <td class="dark"><div id="e" class="redips-drag redips-clone red">Drag 3</div></td>
                        <td class="redips-trash">Delete</td>
                  </tr>
                </tbody>
            </table>
        </div><!-- left container -->
        
        <!-- right container -->
        <div id="right">
            <table id="table2">
                <colgroup>
                    <col width="100"/>
                    <col width="100"/>
                    <col width="100"/>
                    <col width="100"/>
                </colgroup>
                <tbody>
                    <tr>
                        <td class="redips-mark"></td>
                        <td class="redips-mark"></td>
                        <td class="redips-mark"></td>
                        <td class="upper-right redips-mark"></td>
                    </tr>
                    <tr>
                        <td class="redips-mark"></td>
                        <td class="redips-mark"></td>
                        <td class="redips-mark"></td>
                        <th class="redips-mark"></th>
                    </tr>
                    <tr>
                        <td class="redips-mark"></td>
                        <td class="redips-mark"></td>
                        <td class="redips-mark"></td>
                        <th class="redips-mark"></th>
                    </tr>
                    <tr>
                        <td class="last"></td>
                        <th class="last"></th>
                        <th class="last"></th>
                        <th class="last"></th>
                    </tr>
                    <tr>
                        <td class="lower-left last"></td>
                        <th class="last"></th>
                        <th class="last"></th>
                        <th class="last"></th>
                    </tr>
                </tbody>
            </table>
        </div><!-- right container -->
    </div><!-- drag container -->
</div><!-- main container -->
Skatox
  • 4,237
  • 12
  • 42
  • 47
VijaySolanki
  • 1
  • 1

1 Answers1

0

I'm REDIPS.drag author and I will try to answer to your question. Whole library was built on top of HTML table raster as a base. So, it's not possible for a single DIV element to occupy few TD at once. However there is a way to merge TD cells first (when HTML table is generated or dynamically) and then DIV element can be dropped to this bigger TD.

Anyway, in the following jsFiddle example you can manually mark two TD cells (by clicking on them) that are near to each other and then click on "Merge" button at the top. This will dynamically merge TD cells. Now you will be able to drop DIV element to this merged cell. Here is jsFiddle prepared example and code snippet to merge TD cells.

https://jsfiddle.net/dbunic/cexn1wvn/94/

// method merges table cells
redips.merge = function () {
    // first merge cells horizontally and leave cells marked
    REDIPS.table.merge('h', false);
    // and then merge cells vertically and clear cells
    REDIPS.table.merge('v');
    // table should be initialized after merging
    REDIPS.drag.initTables();
};

Example above uses one more lib to merge/split TD cells - REDIPS.table

https://www.redips.net/my/preview/REDIPS_table/

So, there is maybe an option to create JS code inside event handler to automatically merge TD cells before big DIV element is dropped and then after is moved out to split as it was before ... but that would be out of the REDIPS.drag lib scope and probably to complicated.

dbunic
  • 316
  • 2
  • 8