1

テーブル内の要素のドラッグ アンド ドロップを使用しています。ただし、要素をテーブルからドラッグして「ビン アイコン」にドロップし、要素を消去する必要もあります。

ドラッグ アンド ドロップはテーブル内でうまく機能しますが、テーブルの外にドラッグしたい場合、それらは非表示になります (ページの他の要素の下に移動します)。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");
            }
        });
4

2 に答える 2

1

サンプルコードなしで提案することは困難です。しかし、ドラッグ可能な機能を使用しているとしましょう。

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

これはあなたの場合にうまくいくはずです。デフォルトでは、包含は親であり、あなたの場合はテーブルです。しかし、封じ込めを文書として与える場合。ドキュメント全体でウィンドウをドラッグすることが可能です。

tr をドラッグ可能な要素として使用しないでください。行をドラッグ可能にしたい場合は、「div」「ul」および「li」タグを使用します。それらはテーブルの一部ではないため、どこにでも簡単にドラッグできます。

ソースを参照してください: http://jqueryui.com/demos/sortable/

于 2012-08-13T13:45:37.643 に答える
0

jQuery UI Draggableを使用していますか？
もしそうなら、私appendToはあなたの場合のオプションが面白いと思います：

appendToオプションに渡されるか、appendToオプションによって選択された要素は、ドラッグ中にドラッグ可能なヘルパーのコンテナーとして使用されます。デフォルトでは、ヘルパーはドラッグ可能なものと同じコンテナに追加されます。

例えば：

$( ".selector" ).draggable({ appendTo: "body" });
于 2012-08-13T13:44:26.663 に答える