¿Se pueden arrastrar las filas de la mesa?

Question

Tengo dos divs que son float: left:

<div id="inventor"> 
<table> 
<tr id="1"><td>Alexander Graham Bell</td></tr> 
<tr id="2"><td>Thomas Edison</td></tr> 
<tr id="3"><td>Nicholas Tesla</td></tr> 
</table> 
</div> 
<form> 
    <div id="invention"> 
     <table> 
     <tr><td><input name="answer1" />Tesla coil</td><td>Explanation</td></tr> 
     <tr><td><input name="answer2" />Telephone</td><td>Explanation</td></tr> 
     <tr><td><input name="answer3" />Phonograph</td><td>Explanation</td></tr> 
     <tr><td><input name="answer4" />Light bulb</td><td>Explanation</td></tr> 
     </table> 
    </div> 
</form> 

y yo quiero ser capaz de arrastrar el inventor más de la invención.

$("#inventor tr").draggable({ 
    revert: "valid" 
}); 

$("#invention tr").droppable({ 
    drop: function(event, ui) { 
     var inventor = ui.draggable.text(); 
     $(this).find("input").val(inventor); 
    } 
}); 

que era capaz de conseguir este trabajo con elementos de la lista, pero ahora que estoy añadiendo una explicación a la mesa invención, me gustaría usar una tabla en el lado izquierdo para los propósitos de estilo.

Answer 1

Esto puede hacer el truco. Cambios:

• envolvieron los elementos dentro trtbody
• añadido un clon de ayuda al arrastrar un tr. La única forma en que podría hacer que el arrastre realmente funcionara. (Dime si no quieres esto (quieres que el tr se elimine de la tabla cuando empieces a arrastrar) y veremos si podemos encontrar una solución)

El javascript. Cuando se inicia el arrastre, se realiza un clon (debido a helper: "clone") y la variable c guardará la referencia al clon y al tr que se está arrastrando. Cuando el arrastre se detiene, si está fuera de un droppable, el clon se destruye. Si está dentro de la que pueden arrastrarse, destruimos el clon y el tr (por lo que se elimina de la lista y no se pueden arrastrar de nuevo)

//this will hold reference to the tr we have dragged and its helper 
var c = {}; 

$("#inventor tr").draggable({ 
     helper: "clone", 
     start: function(event, ui) { 
      c.tr = this; 
      c.helper = ui.helper; 
     } 
}); 


$("#invention tr").droppable({ 
    drop: function(event, ui) { 
     var inventor = ui.draggable.text(); 
     $(this).find("input").val(inventor); 

     $(c.tr).remove(); 
     $(c.helper).remove(); 
    } 
}); 

El único nuevo en el HTML es el envoltorio de los tr s dentro de tbody etiquetas.

He aquí una demostración: http://jsfiddle.net/UBG9n/1/

Answer 2

Sí que puede haber, una forma es la table row dnd plugin

Answer 3

Una solución más simple basado en el demo de Simen: http://jsfiddle.net/UBG9n/927

No hay necesidad de referencia a la tr hemos arrastrado, porque jQueryUI ofrece ui.draggable y ui.helper que podemos utilizar para limpiar el elemento arrastrado y un ayudante:

$(ui.draggable).remove(); 
    $(ui.helper).remove();`