1

I have implemented a drag and drop architecture for my app, but it works only with IE and Chrome, it doesn't work with Firefox...

HTML:

<table>
            <thead>
                <tr>
                    <th>test</th>
                    <th>test</th>
                    <th>test</th>
                    <th>test</th>
                    <th>test</th>
                    <th>test</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>0</td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>13</td>
                    <td>14</td>
                    <td>15</td>
                    <td>16</td>
                    <td>17</td>
                </tr>
                            </tbody>
                  </table>

JS:

        $('td').on({
            dragstart: function(e) { onDragStart($(this)); },
            dragenter: function(e) { onDragEnter(e, $(this)); },
            dragleave: function(e) {},
            dragover: function(e) { e.preventDefault(); },
            drop: function(e) {},
            dragend: function(e) { onDragEnd(e); }
        });

        var onDragStart = function onDragStart($case){
            sessionStorage.setItem('draggableText', $case.text());
        };


        var onDragEnter = function onDragEnter(e, $case){
            $case.addClass('onDraggableElement');
            e.preventDefault();
        };

        var onDragEnd = function onDragEnd(e){
            e.stopPropagation();
            $('td[draggable="true"').removeClass('onDraggableElement');
        }
tonymx227
  • 5,293
  • 16
  • 48
  • 91

1 Answers1

1

Put DIVs in the TDs. Make the DIVs draggable, not the table cells.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • Is there any solutions with table cells? – tonymx227 Apr 15 '14 at 14:11
  • Consider this: you drag a cell - where do you drop it? on another cell? Does that cell then nest inside the cell? go before it? after it? What happens with the empty cell in the previous position? Do adjacent cells get a colspan to take up the space? Table cells are not positionable. See: http://stackoverflow.com/questions/4564638/using-position-relative-absolute-within-a-td – Diodeus - James MacFarlane Apr 15 '14 at 14:22
  • Text is not an HTML element, so you cannot drag it. Once again, put a DIV in the cell, put the text in the DIV and make the DIV draggable, not the cell itself. – Diodeus - James MacFarlane Apr 15 '14 at 14:35