2011-04-26 105 views
6

我想使用jQuery可排序,可拖放和可拖動來一起工作。我有3個列表:一個斷點佔位符;報告行;報告組。獲取jQuery可排序,可拖放和可拖動一起工作

用戶應該能夠:

  1. 將盡可能多的佔位符拷貝到「報告行名單
  2. 將一在一次一個單一的「報告組」(不是克隆)放入「報告行」集合中(但不是副作用)...直到沒有更多的報告組被留下。
  3. 用戶應該能夠對報告行列表進行排序並制定標準。

我的問題是...
我不能讓數2以上的工作

側面說明:
我還真沒嘗試創建的jsfiddle這個,但不能得到jsFiddle解決jQuery的用戶界面文件...所以我必須在這裏包括整個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> 

回答

2

您的#2問題是$("#divReportGrouping div.item")助手應設置爲'original',而不是克隆,並在drop追加到#divReportRows之一是項目本身,而不是克隆。這裏是工作示例:http://jsfiddle.net/3zpV6/2/

+0

感謝您的幫助。儘管這個解決方案的問題是,當使用'原始'時,ReportGroup項目會飛到屏幕的另一側,直到您真正放下它...這在視覺上是不可取的。你知道如何解決這個問題嗎? – 2011-04-27 11:23:12

+0

嗨,你可以在$(「#divReportGrouping」)上添加'revert'選項,將draggable()設置爲'invalid'並在stop()上添加處理程序,如下所示:stop:function(event,ui){ ui.helper.css( '位置', '相對'); } – Xnake 2011-04-28 03:29:49

+0

我試過停止:功能,它不起作用。有另一種方法嗎? – 2011-05-02 17:37:01

3

這是一個工作解決方案,我想出了拖動/滴/排序。希望它能幫助別人。

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