Obteniendo jQuery ordenable, desplegable y arrastrable para trabajar juntos

Estoy tratando de usar jQuery ordenable, desplegable y arrastrable para trabajar juntos. Tengo 3 listas: un marcador de punto de ruptura; filas de informes; reportar gruposObteniendo jQuery ordenable, desplegable y arrastrable para trabajar juntos

El usuario debe ser capaz de:

arrastrar tantas copias de marcador de posición en la lista de los 'Informe filas'
Arrastre uno-a-un-tiempo de un solo 'grupo de informes' (no es un clon) en la colección 'filas del informe' (pero no viceversa) ... hasta que no queden más grupos de informes.
El usuario debería poder ordenar la lista de filas del informe ad nauseum.

Mi problema es ...
no puedo obtener el número 2 anterior para trabajar

Nota al pie:
Realmente traté de crear un jsFiddle para esto, pero no podía conseguir jsFiddle para resolver los archivos UI de jQuery ... así que tengo que incluir la página HTML COMPLETA aquí ... ¡lo siento!

Aquí está el código 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>

Fuente

2011-04-26 Prisoner ZERO

Su problema para # 2 es para $("#divReportGrouping div.item") el ayudante debe establecerse en 'original' en lugar del clon, y en drop la que se anexa a #divReportRows es la elemento en sí y no el clon. Aquí está la muestra de trabajo: http://jsfiddle.net/3zpV6/2/

Fuente

2011-04-27 02:29:14 Xnake

Gracias por la ayuda. Sin embargo, el problema con esta solución es que cuando se usa 'original', el elemento ReportGroup vuela al lado opuesto de la pantalla hasta que realmente se cae ... lo que es visualmente indeseable. ¿Sabes cómo arreglar eso? –

Hola, puedes agregar la opción 'revertir' en $ ("# divReportGrouping"). Draggable() para establecerla como 'inválida' y agregar el controlador en stop() como sigue: stop: function (event, ui) { ui.helper.css ('posición', 'relativo'); } – Xnake

Probé la función stop: y no funciona. ¿Hay otra manera? –

Aquí hay una solución de trabajo que se me ocurrió que arrastra/cae/ordena. Espero que ayude a alguien.

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

Fuente

2011-07-05 19:00:46

Obteniendo jQuery ordenable, desplegable y arrastrable para trabajar juntos

Respuesta

Cuestiones relacionadas