Question

我在表格中使用拖放元素。但我还需要将元素拖出表格，然后将它们放在“bin图标”上以便删除它们。

拖放工作在表格中运行良好，但是当我想要拖出表格时，它们会被隐藏（它们会在我页面的其他元素下面）。我已经尝试了z-index和position属性，没有成功。

有人有想法吗？

我谈到html的这些部分：

<div id="calendar">
  <div class="ui-widget wc-container">
    <div class="ui-widget-header wc-toolbar">
      <div class="ui-widget-content wc-header">
        <div class="wc-scrollable-grid" style="height: 416px;">
          <table class="wc-time-slots">
            <tbody>
              <tr class="wc-grid-row-timeslot">
              <tr class="wc-grid-row-oddeven">
              <tr class="wc-grid-row-events">

元素在wc-grid-row-events中，我想将它们放在wc-header

上

我的javascript是：

        $calEvent.draggable({
            containment: '#Calendrier', //pour permettre le drag des saisies jusqu'à l'icône corbeille
            revert: 'invalid',
            opacity: 0.5,
            start: function (event, ui) {
                var $calEvent = ui.draggable || ui.helper;
                options.eventDrag(calEvent, $calEvent);
                ui.helper.css("z-index", "10");
                ui.helper.css("position", "absolute");
            }
        });

Answer 1

如果没有示例代码，很难建议。但是，假设您正在使用可拖动设施。

$("#draggableid").draggable({ containment: "document" });

这应该适用于您的情况。默认情况下，包含是父级，在您的情况下是表。但如果你把遏制作为文件。可以在整个文档中拖动窗口。

您不应将tr用作可拖动元素。如果你想要行可拖动使用“div”“ul”和“li”标签。因为它们不会成为桌子的一部分，所以你可以轻松地将它们拖到任何地方。

请参阅来源：http://jqueryui.com/demos/sortable/

Answer 2

您使用的是jQuery UI Draggable?
如果是这样，我认为 appendTo 选项在您的情况下很有趣：

传递给appendTo选项或由appendTo选项选择的元素将在拖动过程中用作可拖动助手的容器。默认情况下，帮助程序将附加到与可拖动的相同的容器中。

例如：

$( ".selector" ).draggable({ appendTo: "body" });

从表中拖放

2 个答案: