Ottenere jQuery ordinabile, trascinabile e trascinabile per lavorare insieme

Sto cercando di usare jQuery ordinabile, trascinabile e trascinabile per lavorare insieme. Ho 3 liste: un segnaposto break-point; segnalare righe; segnalare gruppi.Ottenere jQuery ordinabile, trascinabile e trascinabile per lavorare insieme

L'utente deve essere in grado di:

trascinare le copie segnaposto nella lista la 'relazione righe'
Trascinare uno-a-un-tempo di un singolo 'gruppo di rapporti' (non un clone) nella raccolta 'righe di report' (ma non viceversa) ... fino a quando non verranno più lasciati gruppi di report.
L'utente deve essere in grado di ordinare l'elenco di righe del rapporto fino alla nausea.

Il mio problema è ...
non riesco a Numero 2 di cui sopra a lavorare

Nota a margine:
ho davvero provato a creare un jsFiddle per questo, ma non ha potuto ottenere jsFiddle per risolvere i file dell'interfaccia utente di jQuery ... quindi devo includere TUTTA la pagina HTML per te qui .... scusa!

Ecco il codice 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>

fonte

2011-04-26 Prisoner ZERO

Il tuo problema per 2 # è per $("#divReportGrouping div.item") l'assistente deve essere impostato su 'original' invece di clonare, e sulla drop quello che viene aggiunto al #divReportRows è il oggetto stesso e non il clone. Ecco l'esempio funzionante: http://jsfiddle.net/3zpV6/2/

fonte

2011-04-27 02:29:14 Xnake

Grazie per l'aiuto. Il problema con questa soluzione è quando viene utilizzato "originale" l'elemento ReportGroup vola sul lato opposto dello schermo fino a quando non viene effettivamente rilasciato ... che è visivamente indesiderabile. Sai come aggiustarlo? –

Salve, è possibile aggiungere l'opzione 'ripristina' su $ ("# divReportGrouping"). Draggable() da impostare su 'non valido' e aggiungere il gestore su stop() in questo modo: stop: function (event, ui) { ui.helper.css ('posizione', 'relativo'); } – Xnake

Ho provato l'arresto: la funzione e non funziona. C'è un altro modo? –

Ecco una soluzione di lavoro che ho trovato che trascina/elimina/ordina. Spero che aiuti qualcuno.

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

fonte

2011-07-05 19:00:46

Ottenere jQuery ordinabile, trascinabile e trascinabile per lavorare insieme

risposta

Problemi correlati