2011-04-26 7 views
6

Próbuję użyć do sortowania jQuery, droppable i przeciągalnego, aby współpracować. Mam 3 listy: symbol zastępczy punktu przerwania; zgłoś wiersze; grupy raportów.Uzyskiwanie jQuery do sortowania, zrzucania i przeciągania w celu wspólnej pracy

Użytkownik powinien być w stanie:

  1. Drag tyle kopii zastępczych na liście 'Raport Wiersze'
  2. przeciągnij-at-a-time pojedynczy 'grupa raport' (nie klon) do kolekcji "zestaw wierszy" (ale nie do wersetu) ... dopóki nie pozostaną żadne grupy raportów.
  3. Użytkownik powinien mieć możliwość sortowania listy wierszy raportu ad nauseum.

Mój problem jest ...
nie mogę dostać numer 2 powyżej pracować

marginesie:
ja naprawdę nie starają się stworzyć jsFiddle do tego, ale nie mógł się jsFiddle do rozpoznawania plików UI jQuery ... więc muszę podać tutaj stronę ENTIRE HTML .... przepraszam!

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

Odpowiedz

2

Twój problem nr 2 jest dla $("#divReportGrouping div.item") pomocnik powinien być ustawiony na 'original' zamiast klonu, a na drop ten, który jest dołączany do #divReportRows jest sam przedmiot, a nie klon. Oto działająca próbka: http://jsfiddle.net/3zpV6/2/

+0

Dzięki za pomoc. Problem z tym rozwiązaniem polega na tym, że element "ReportGroup" leci po przeciwnej stronie ekranu, dopóki go nie upuścisz ... co jest niepożądane wizualnie. Czy wiesz, jak to naprawić? –

+0

Witam, możesz dodać opcję "przywróć" na $ ("# divReportGrouping"). Przeciągalną(), aby ustawić na "niepoprawną" i dodaj handler'a na stop() tak jak: stop: function (event, ui) { ui.helper.css ("pozycja", "względna"); } – Xnake

+0

Próbowałem zatrzymać: funkcja i nie działa. Czy istnieje inny sposób? –

3

Oto działające rozwiązanie, które wymyśliłem, przeciągając/upuszczając/sortując. Mam nadzieję, że to komuś pomaga.

<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> 
Powiązane problemy