This project is read-only.

Posibility to drag and drop table cells

Nov 9, 2011 at 3:44 PM

Hi,

I have this code:

<table id="list1">
        <tr><td><div>1</div></td>
        <td><div>2</div></td>
        </tr>
        <tr><td><div>3</div></td>
        <td><div>4</div></td>
        </tr>
        <tr><td><div>5</div></td>
        <td><div>6</div></td>
        </tr>
        <tr><td><div>7</div></td>
        <td><div>7</div></td>
        </tr>
    </table>

Is there a way I could make the table cells to be able to use the sort functionality, problem is I cannot use UL.

Regards,

Cipi

Nov 10, 2011 at 3:58 PM

Try changing:

dragSelector: "div"

to

dragSelector: "tr"

Then just modify placeHolderTemplate to use a <tr> instead of a <li>

Nov 11, 2011 at 8:10 AM

Hi,

  Thanks for the response, I've tried that but is not working, also notice that in one TR I have 2 TD.

I've tested with this:

<script type="text/javascript">
        $("#list1").dragsort({ dragSelector: "tr", dragBetween: false, dragEnd: saveOrder, placeHolderTemplate: "<tr><td class='placeHolder'><div></div></td></tr>" });
</script>

Regards,

Cipi

Nov 27, 2011 at 4:19 AM
Edited Nov 27, 2011 at 4:19 AM

You're on the right track joetito, to complete his suggestion here's what you can try:

$("#list1 tr").dragsort({ itemSelector: "td", dragSelector: "td", dragBetween: true, placeHolderTemplate: "<td></td>" });

The itemSelector (which is undocumented) is the css selector that specifies what html element to move, although unlike the dragSelector it will only match elements that are direct children of the specified list in this case "#list1 tr". So this is making each row a separate list and dragBetween set to true allows you to drag the table cell between the lists i.e. the rows. The dragSelector simply specifies what you must click on in order to drag the item.

The problem with this is that when dragged (positioned using css position: absolute, top and left) a gap is still left behind in the table which normally doesn't with position absolute. Normally dragsort uses placeHolderTemplate to create a new element to create this gap which allows you to style it (unlike the gap left by your dragged td) which is useful if its it at the end of row or different row that's empty. So at the moment you will have two gaps which may look/work strange. Also td's don't wrap to another row so people will  be able to create rows of different lengths which may look strange (don't know your situation). This is why styling UL to look like a table has been the recommendation, but if you want I can provide changes to dragsort to disable creating a placeHolder if you want to continue with a table despite these limitations.

Nov 27, 2011 at 2:16 PM

Hi,

Thx for your answer, problem in my case is that i don't control the template that creates the table structure, I have only placeholders where i can put data, so I cannot change from table to UL.

If you can provide the change for table like will be greatly appreciated.

Regards,

Cipi

Dec 9, 2011 at 9:38 PM
Edited Jan 18, 2012 at 8:37 PM

Apologies for the delay, this is now done and part of next release:
http://dragsort.codeplex.com/releases/view/80735

I've also changed itemSelector, dragSelector and placeHolderTemplate (although placeHolder is now not used if itemSelector is td) to use tag name of first child in list container instead of simply defaulting to LI, so now you can simply call dragsort on your table like this:

$("#list1 tr").dragsort({ dragBetween: true });