Estoy tratando de usar jQuery que se puede ordenar, drop y la posibilidad de arrastrar a trabajar juntos. Tengo 3 listas: un punto de ruptura marcador de posición; informe filas; los grupos de informes.

El usuario debe ser capaz de:

  1. Arrastrar tantos marcador de posición de copias en el ‘informe de las filas de la» lista
  2. Arrastre uno-en-un-tiempo de un único informe de grupo’ (no es un clon) en el informe de filas’ de la colección (pero no vice-verso)…hasta que no hay más grupos de informes están a la izquierda.
  3. El usuario debe ser capaz de ordenar el informe de las filas de la lista hasta la saciedad.

Mi problema es…

No puedo obtener el Número 2 anterior para trabajar

Lado Nota:

Realmente me hizo tratar de crear un jsFiddle para esto, pero no podía conseguir jsFiddle para resolver jQuery UI archivos…así que tengo que incluir a TODA la página HTML para usted 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>

OriginalEl autor Prisoner ZERO | 2011-04-26

2 Comentarios

  1. 2

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

    Gracias por la ayuda. El problema con esta solución, aunque es cuando «original» se utiliza el ReportGroup elemento vuela hacia el lado opuesto de la pantalla hasta que realmente gota…que es visualmente indeseables. ¿Sabe usted cómo arreglar eso?
    Hola, usted puede agregar el ‘revert’ opción en $(«#divReportGrouping»).draggable() se establece en ‘invalid’ y agregar controlador de parada() así: stop: function(event, ui){ interfaz de usuario.ayudante.css(‘position’,’relativo’); }
    He probado el stop: función y no funciona. Hay otra manera?
    Qué comportamiento hizo dar a usted cuando usted dijo que no funcionan? He aquí el ejemplo: jsfiddle.net/3zpV6/3
    Gracias por la respuesta & lo Siento..yo debería haber explicado mejor! Como se arrastra un ReportGroup en el ReportRow colección el elemento vuela fuera de la pantalla. I «el pensamiento» de su revisión (arriba) se va a corregir eso…pero no lo hizo. Alguna idea? Gracias por su valioso tiempo!

    OriginalEl autor Xnake

  2. 3

    Aquí es una solución de trabajo se me ocurrió que arrastra/gotas/tipo. 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>

    OriginalEl autor Spencer Sullivan

Dejar respuesta

Please enter your comment!
Please enter your name here