0

我有一个可编辑的表格，您可以在其中使用按钮动态添加行，但即使它们具有 droppable-Selektor，我也无法将可拖动的内容拖放到新行中。我试图用委托和droppable()新行修复它，但失败了。任何提示或想法？

Here is my Code:http://jsfiddle.net/gM3bF/7/

4

2 回答 2

1

您必须添加.droppable(options)到新行。

为了使它工作，我为你添加了一个新行：

var newtr = $('<tr />', { class: 'sortable-row ui-droppable newRow' });

现在将 droppable 添加到这个 newRow （最后删除这个新的无用类）：

$(".newRow") .droppable( {
        revert: true,
        drop: function (event, ui) {

            var id = ui.draggable.prop('id');
            if (id == "blurk") { var content = blurkContent(); };
            var title = $(event.target).closest('tr').children()[2];
            $(title).html(unescape(content[0]));
            var description = $(event.target).closest('tr').children()[3];
            $(description).html(unescape(content[1]));
            var link = $(event.target).closest('tr').children()[4];
            $(link).html(content[2]);
            var thumbnail = $(event.target).closest('tr').children()[5];
            $(thumbnail).html(content[3]);

        }
} )
$(".newRow").removeClass("newRow");

当然，您可以简化您添加的参数，为此创建一个新的 var。

小提琴

希望能帮助到你

于 2013-10-22T09:58:06.770 回答
0

采用：

$(document).on(eventName, selector, function);

用法：

$(document).on('click', 'input.addButton', function(){ alert('clicked'); });

$(document).on('dblclick', '#editableTable td', function(){ alert('td clicked'); });

$(document).on('click', '#editableTable input.deleteButton', function(){ alert('delete clicked'); });

这些您可以在文档就绪事件处理程序中声明一次。

然而，

如果您正在动态添加可拖动元素，请确保在将它们添加到 DOM.draggable({}) 后调用。

希望有帮助。

于 2013-10-22T09:57:53.633 回答