当前位置： 文江博客话题详情

让 jQuery 可排序、可放置和可拖动一起工作

发布于 2024-11-03 08:09:31 字数 21069 浏览 0 评论 0原文

我正在尝试使用 jQuery 可排序、可放置和可拖动来协同工作。我有 3 个列表：一个断点占位符；报告行；报告组。

用户应该能够：

  1. 将尽可能多的占位符副本拖到“报告行”列表中
  2. 将一次一个“报告组”（不是克隆）拖到“报告行”列表中“报告行”集合（但反之则不然）...直到不再剩下报告组。
  3. 用户应该能够对报表行列表进行排序。

我的问题是...
我无法让上面的 2 号工作

旁注：
我确实尝试为此创建一个 jsFiddle，但无法让 jsFiddle 解析 jQuery 的 UI 文件...所以我必须在这里为您包含整个 HTML 页面...抱歉！

这是 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>
原文

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:

  1. Drag as many placeholder copies into the 'report rows' list
  2. 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.
  3. 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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

回忆追雨的时光 2024-11-10 08:09:31

这是我想出的拖/放/排序的有效解决方案。希望它能帮助某人。

<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>

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>
回复 原文
智商已欠费 2024-11-10 08:09:31

#2 的问题是 $("#divReportGrouping div.item") 助手应设置为 'original' 而不是克隆，并且在 drop 时 附加到#divReportRows 的是项目本身，而不是克隆。这是工作示例： http://jsfiddle.net/3zpV6/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/

回复 原文
~没有更多了~

关于作者

小姐丶请自重

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文