Getting jQuery sortable, droppable and draggable to work together

F

2

6

I am trying to use jQuery sortable, droppable and draggable to work together. I have 3 lists: a break-point placeholder; report rows; report groups.

The user should be able to:

Drag as many placeholder copies into the 'report rows' list
Drag one-at-a-time a single 'report group' (not a clone) into the 'report rows' collection (but not vice-verse)...until no more report groups are left.
The user should be able to sort the report rows list ad nauseum.

My problem is...
I cannot get Number 2 above to work

Side Note:
I really did try to create a jsFiddle for this but couldn't get jsFiddle to resolve jQuery's UI files...so I have to include the ENTIRE HTML page for you here....sorry!

Here is the HTML:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>DragDrop Sample</title>

    <link href="Includes/Css/jquery.ui.all.css" rel="stylesheet" type="text/css" />

    <script src="Includes/JavaScript/jQuery/Core/jquery-1.4.4.js" type="text/javascript"></script>
    <script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.core.js" type="text/javascript"></script>
    <script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.draggable.js" type="text/javascript"></script>
    <script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.droppable.js" type="text/javascript"></script>
    <script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.sortable.js" type="text/javascript"></script>

    <style type="text/css">
    body
    {
        font-family: Arial; 
        font-size: 18px;
    }
    #myDiv
    {
        width: 500px;
    }
    .item
    {
        background-color: #DDDDDD;
        border: solid 1px #777777;
        margin: 2px;
        width: 300px;
    }
    .breakPoint
    {
        background-color: #999966;
    }
    .placeHolder
    {
    }
    .reportRow
    {
    }
    .reportGroup
    {
    }
    </style>

    <script type="text/javascript">
    $(document).ready(function() {

        $("#divReportRows").sortable({
        });

        $("#divReportRows").droppable({
            accept: '.breakPoint, .reportGroup',
            drop: function(event, ui) {

                var item = $(ui.draggable);

                if (item.hasClass('reportRow'))
                    return;

                if (item.hasClass('placeHolder'))
                    item.removeClass("placeHolder");

                if (item.hasClass('reportGroup'))
                    item.removeClass("reportGroup");

                item.addClass("reportRow");

                $(this).append(item.clone());
            }
        });

        $("#divBreakPoint").draggable({
            helper: 'clone'
        });

        $("#divReportGrouping div.item").draggable({
            helper: 'clone'
        });
    });
    </script>

</head>
<body>
    <table>
        <thead>
            <tr>
                <td colspan="4" style="color: #660000;">
                    The purpose here is to be able to:<br />
                    <ul>
                        <li>Drag cloned-copies of 'break-point' placeholders into the 'report rows' collection.</li>
                        <li>Drag a single entire 'report group' (not a clone) into the 'report rows' collection.</li>
                        <li>Once dragged, the user can re-sort 'report rows' to their hearts content.</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                </td>
                <td>
                    Report Rows
                </td>
                <td>
                    Report Groupings
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td valign="top">
                    <div id="divBreakPoint" class="item breakPoint placeHolder">
                        <input type="hidden" name="ctl00$ContentPlaceHolder1$hidReportKey" id="ctl00_ContentPlaceHolder1_hidReportKey" />
                        <input type="hidden" name="ctl00$ContentPlaceHolder1$hidProjectKey" id="ctl00_ContentPlaceHolder1_hidProjectKey" />
                        <input type="hidden" name="ctl00$ContentPlaceHolder1$hidAsOf" id="ctl00_ContentPlaceHolder1_hidAsOf" />
                        <span id="ctl00_ContentPlaceHolder1_lblName">BreakPoint</span>
                    </div>
                </td>
                <td>
                </td>
                <td valign="top">
                    <div id="divReportRows">
                            <div class="item reportRow reportRow">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl00$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl00_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl00$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl00_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl00$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl00_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportRows_ctl00_lblName">DETAILED ENGINEERING</span>
                            </div>
                            <div class="item reportRow reportRow">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl01$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl01_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl01$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl01_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl01$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl01_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportRows_ctl01_lblName">OWNER FURNISHED MATERIALS</span>
                            </div>
                            <div class="item reportRow reportRow">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl02$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl02_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl02$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl02_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl02$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl02_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportRows_ctl02_lblName">FIELD CONSTRUCTION</span>
                            </div>
                            <div class="item breakPoint reportRow">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl03$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl03_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl03$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl03_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl03$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl03_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportRows_ctl03_lblName">BreakPoint</span>
                            </div>
                            <div class="item reportRow reportRow">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl04$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl04_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl04$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl04_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl04$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl04_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportRows_ctl04_lblName">PENDING CHANGES</span>
                            </div>

                            <div class="item breakPoint reportRow">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl05$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl05_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl05$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl05_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl05$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl05_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportRows_ctl05_lblName">BreakPoint</span>
                            </div>
                            <div class="item reportRow reportRow">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl06$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl06_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl06$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl06_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl06$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl06_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportRows_ctl06_lblName">CONTINGENCY</span>
                            </div>
                            <div class="item breakPoint reportRow">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl07$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl07_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl07$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl07_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl07$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl07_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportRows_ctl07_lblName">BreakPoint</span>
                            </div>
                    </div>
                </td>
                <td valign="top">
                    <div id="divReportGrouping">
                            <div class="item reportGroup">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl00$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl00_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl00$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl00_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl00$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl00_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl00_lblName">CONSTRUCTION MANAGEMENT</span>
                            </div>
                            <div class="item reportGroup">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl01$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl01_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl01$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl01_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl01$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl01_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl01_lblName">CONTINGENCY</span>
                            </div>
                            <div class="item reportGroup">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl02$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl02_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl02$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl02_hidProjectKey" value="869" />

                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl02$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl02_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl02_lblName">DETAILED ENGINEERING</span>
                            </div>
                            <div class="item reportGroup">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl03$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl03_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl03$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl03_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl03$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl03_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl03_lblName">FEL</span>
                            </div>
                            <div class="item reportGroup">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl04$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl04_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl04$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl04_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl04$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl04_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl04_lblName">FIELD CONSTRUCTION</span>
                            </div>
                            <div class="item reportGroup">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl05$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl05_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl05$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl05_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl05$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl05_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl05_lblName">LUMP SUM CONTRACTS</span>
                            </div>                        
                            <div class="item reportGroup">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl06$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl06_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl06$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl06_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl06$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl06_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl06_lblName">NRE</span>
                            </div>
                            <div class="item reportGroup">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl07$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl07_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl07$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl07_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl07$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl07_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl07_lblName">OWNER FURNISHED MATERIALS</span>
                            </div>
                            <div class="item reportGroup">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl08$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl08_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl08$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl08_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl08$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl08_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl08_lblName">PENDING CHANGES</span>
                            </div>
                            <div class="item reportGroup">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl09$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl09_hidReportKey" value="306" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl09$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl09_hidProjectKey" value="869" />
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl09$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl09_hidAsOf" value="4/26/2011 12:51:04 PM" />
                                <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl09_lblName">SCSA</span>
                            </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Fount answered 26/4, 2011 at 18:10 Comment(0)

G

2

Your problem for #2 is for $("#divReportGrouping div.item") the helper should be set to 'original' instead of clone, and on drop the one that is appended to #divReportRows is the item itself and not the clone. Here is the working sample: http://jsfiddle.net/3zpV6/2/

Grassplot answered 27/4, 2011 at 2:29 Comment(6)

Thanks for the help. The issue with this solution though is when 'original' is used the ReportGroup item flies to the opposite side of the screen until you actually drop it...which is visually undesirable. Do you know how to fix that? – Fount 27/4, 2011 at 11:23

Hi, you can add the 'revert' option on $("#divReportGrouping").draggable() to be set to 'invalid' and add handler on stop() like so: stop: function(event, ui){ ui.helper.css('position','relative'); } – Grassplot 28/4, 2011 at 3:29

I tried the stop: function and it doesn't work. Is there another way? – Fount 2/5, 2011 at 17:37

What behavior did it give you when you said it didn't work? Here's the sample: jsfiddle.net/3zpV6/3 – Grassplot 3/5, 2011 at 0:54

Thanks for the reply & Sorry..I should have explained better! As you drag a ReportGroup into the ReportRow collection the item flies off-screen. I "thought" your fix (above) was going to correct that...but it didn't. Any ideas? Thank you for your valuable time! – Fount 3/5, 2011 at 12:13

Works great. Does not work on newer versions of jQuery though. – Lachrymator 15/5, 2014 at 12:50

M

3

Here is a working solution I came up with that drags/drops/sorts. Hope it helps someone.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>

    <style type="text/css">
        #DraggableList { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; border: 1px; border-style:solid; }
        #DroppableList { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; border: 1px; border-style:solid; }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#DraggableList li").draggable({
                revert: 'invalid'
            });
            $("#DroppableList").sortable();

            $("#DroppableList").droppable({
                drop: function (event, ui) {
                // If test in place to ignore the sortable instance of the droppable function
                    if ($(ui.draggable).hasClass("ui-draggable-dragging")) {
                        var itemText = $(ui.draggable).text();
                        $(ui.draggable).empty();
                        $('#DroppableList').append($('<li>').text(itemText).addClass("dropped"));
                    }
                }
            });

            $('#DroppableList li').live('dblclick', function (evt) {
                evt.preventDefault();
                $(this).remove();
            });
        });
    </script>


    </head>
    <body>
        <form id="form1" runat="server">
            <div id="ListDiv">
                <ul id="DraggableList">
                    <li>Linebacker</li>
                    <li>Tackle</li>
                    <li>Safety</li>
                    <li>Cornerback</li>
                    <li>Guard</li>
                    <li>End</li>
                </ul>
            </div>
            <div>
                <ul id="DroppableList">
                </ul>
            </div>
        </form>
    </body>
    </html>

Methadone answered 5/7, 2011 at 19:0 Comment(0)

G

2