Drag & Drop Tabellenzellen Inhalt

Question

Ich habe eine dynamische Tabelle hier. Tabellendaten enthalten auch eine Spanne. Wie kann man den Bereich irgendwo zwischen den Zellen der Tabelle ziehen und ablegen?

<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

Wenn Sie jQuery verwenden, können Sie auch die jQuery UI-Bibliothek testen. Die Spanne sollte ein ziehbar http://jqueryui.com/draggable/ und die Zelle ein abwerfbaren http://jqueryui.com/droppable/

Answer 2

Demo: http://jsfiddle.net/B93w9/

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

und benennen Sie die Tabelle von id <table id="our_table">

Answer 3

Oder Sie einfach per Drag Drop html5 mit diesem einfachen Code verwenden (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> 

mit diesem Code müssen Sie auch assig n eine ID zu Ihrem span-Tag
in diesem anderen fiddle können Sie den Effekt mit zwei Span-Tags sehen.
In diesem Fall, wenn es einen Bereich in der Zelle gibt, funktioniert das Drop-Ereignis nicht