Przeciągnij i upuść zawartość komórek tabeli

Question

Mam tutaj tabelę dynamiczną. Dane tabeli obejmują także jeden zakres. Jak przeciągnąć i upuścić ten obszar w dowolnym miejscu pomiędzy komórkami tabeli?

<table id="#our_table"> 
    <tr> 
     <th>head1</th> 
     <th>head1</th> 
     <th>head1</th> 
    </tr> 
    <tr> 
     <td><span id="event"></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

Answer 1

Jeśli korzystasz z jQuery, możesz również wypróbować bibliotekę interfejsu jQuery. Rozpiętość powinny być przeciągane http://jqueryui.com/draggable/ a komórka droppable http://jqueryui.com/droppable/

Answer 2

demo: http://jsfiddle.net/B93w9/

$(function() { 
    $("#our_table span").draggable(); 
    $("#our_table td").droppable(); 
}); 

i zmienić id tabeli za <table id="our_table">

Answer 3

Albo po prostu użyć drag drop HTML5 z tego prostego kodu (Fiddle)

<script type="text/javascript"> 
$(document).ready(function(){ 
     $('.event').on("dragstart", function (event) { 
       var dt = event.originalEvent.dataTransfer; 
       dt.setData('Text', $(this).attr('id')); 
      }); 
     $('table td').on("dragenter dragover drop", function (event) { 
      event.preventDefault(); 
      if (event.type === 'drop') { 
       var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id')); 
       de=$('#'+data).detach(); 
       de.appendTo($(this)); 
      }; 
     }); 
}) 
</script> 

z tym kodem należy również assig n id do tagu span
w tym innym fiddle możesz zobaczyć efekt z dwoma znacznikami span.
W takim przypadku, jeśli w komórce występuje rozpiętość, zdarzenie upuszczenia nie działa