Перетаскивание div в таблице?

Question

У меня есть таблица, которая создается динамически, и у меня есть место div в ней с определенной информацией, теперь я хочу перетащить этот div из одного td в другой.

Я сделал скрипку, в которой я умею перетаскивать, но не могу ее отбросить. Это мой fiddle.

Любая помощь.

КОД:

var iterations = 02; 
var slottime = '06:00'; 
var patientallowed = '01'; 
var appointment = 'Sheraz [Surgery],$5'; 
var d = new Date(); 

var month = d.getMonth() + 1; 
var day = d.getDate(); 
$(document).ready(function() { 

    var output = d.getFullYear() + '/' + (('' + month).length < 2 ? '0' : '') + month + '/' + (('' + day).length < 2 ? '0' : '') + day; 
    //Try to get tbody first with jquery children. works faster! 
    var tbody = $('#myTable').children('tbody'); 

    //Then if no tbody just select your table 
    var table = tbody.length ? tbody : $('#myTable'); 
    table.append('<tr>  <td align="center" colspan="5">Provider</td> </tr> <tr>  <td align="center" colspan="5">Facility</td> </tr> <tr>  <td align="center" colspan="5">' + output + '</td> </tr>'); 

    for (var z = 0; z <= iterations; z++) { 
     table.append('<tr>   <td width="35">' + slottime + '</td>  <td width="37">' + patientallowed + '</td>  <td width="32">  <div id="checkbox"> <input type="checkbox" name="checkbox" > </div> </td>  <td class="pole" id="slotid" width="822"><div id="drag" class="figura" >' + appointment + '</div></td> </tr>'); 
    } 
    table.append('<tr>   <td width="35">' + slottime + '</td>  <td width="37">' + patientallowed + '</td>  <td width="32">  <div id="checkbox"> <input type="checkbox" name="checkbox" > </div> </td>  <td style="width:200px; overflow:hidden;" class="pole" id="slotid" width="822"></td> </tr>'); 
    $(".figura").draggable({ 
     revert: true, 
     appendTo: 'body', 
     stack: '.pole', 

     start: function() { 
      $('#tabs').css('z-index', '9999'); 
     }, 
     stop: function() { 
      $('#tabs').css('z-index', '0'); 
     } 
    }); 

    $(".pole").droppable(); 
}); 

Answer 1

может быть, это может дать вам представление о том, как это сделать,

я изменить некоторые в JavaScript

$(".figura").draggable({ 
    revert: 'invalid', 
}); 

    $(".pole").droppable({ 
     accept : '.figura', 
     drop : function(e, ui) { 
      var drag_element = ui.draggable[0]; 

       $(drag_element).css({'position' : ''}); 

       $(drag_element).draggable({ 
        revert : 'invalid' 
       }); 

       $(this).append(drag_element); 
     } 
    }); 
});