在表格中拖放div？

我有一個正在動態創建的表格，並且我已將place div與某些信息結合，現在我想將該div從一個td拖到另一個td。在表格中拖放div？

我已經做了一個小提琴，在這裏我可以拖動但不能放下。這是我的fiddle。

任何一個幫助。

CODE：

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(); 
});

來源

2015-02-11 Sherry

請使代碼易於閱讀和還張貼您的呈現的HTML。 – 2015-02-11 07:16:54

請參閱小提琴鏈接。 http://jsfiddle.net/sherazakbar/5sLwf5fz/12/ – Sherry 2015-02-11 07:17:05

@frebin francis我已經發布小提琴鏈接 – Sherry 2015-02-11 07:18:00

也許這可以給你如何做到這一點的想法，

我改變了一些在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); 
     } 
    }); 
});

來源

2015-02-11 07:42:18

在表格中拖放div？

回答

相關問題