用表拖放div?

时间:2015-02-11 07:09:24

标签: jquery jquery-ui

我有一个动态创建的表,我在其中放置了div,但是我想将div从一个td拖到另一个。

我做了一个小提琴,我可以拖延但不能放弃。这是我的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();
});

1 个答案:

答案 0 :(得分:0)

也许这可以让你了解如何做到这一点,

我在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);
        }
    });
});