3

私はまだjQueryに慣れていないので、質問がありました。ユーザーがアイテムをあるリストにドラッグし、別のリストの「バケット」にドロップできる「ドラッグアンドドロップ」メソッドを実装しようとしています。ドラッグ部分が下がっているようですが、2 つのことが原因でエラーが発生しています。まず、ドラッグされた「クローン」を削除できないようです。次に、「ドラッグ可能」リストから元のアイテムを削除できません。以下は私のコードです (ASP.Net でレンダリングされた後)。

次の jQuery ライブラリを使用しています。

  1. 1.4.2/jquery.js,jquery.ui.core.js
  2. jquery.ui.widget.js
  3. jquery.ui.mouse.js
  4. jquery.ui.draggable.js
  5. jquery.ui.droppable.js。

Jスクリプト:

    $(function () {
        $(".draggable1").draggable({
            helper:'clone',
            scroll: false,
            revert: "invalid",
            appendTo: '#PopupBody',             
            drag: function(event,ui){              
            }               

        });

        $(".droppable1").droppable({   

            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function (event, ui) {
                var drag_id = $(ui.draggable).attr("id");
                var targetElem = $(this).attr("id");
                deleteMe = true;            
              $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped! inside " + targetElem);
              //destroy clone
             //remove from list


            }
        });
    });

HTML:

<table style="width:100%; height:100%; position:relative; border:1px solid blue;">
   <tr>
     <td style="height:100%">
        <div id="divWrapper" style="position:relative; border:1px solid green; overflow:auto;  width:15em; height:80%;">
           <table id="testDlg1_dlUsers" cellspacing="0" style="border-collapse:collapse;">
              <tr>
                 <td style="color:#8C4510;background-color:#FFF7E7;">
                    <div id="divWrapperItem"  class="draggable1 ui-widget-content" style="border:1px solid black;">
                       <table>
                         <tr>
                            <td>
                               <span id="testDlg1_dlUsers_DOBLabel_0">Hello</span>
                            </td>
                         </tr>
                       </table>
                   </div>
                </td>
             </tr>
          </table> 
      </div>
   </td>
   <td style="height:100%">
        <div style="position:relative; border:1px solid green; width:15em; height:80%;">
            <table id="testDlg1_dlGroups" cellspacing="0" style="border-collapse:collapse;">
               <tr>
                 <td style="color:#8C4510;background-color:#FFF7E7;">
                    <div id="testDlg1_dlGroups_droppable1_0" class="droppable1 ui-widget-header" style="border:1px solid black; padding-left:20px;">
                       <table>
                          <tr>
                             <td>
                                <span id="testDlg1_dlGroups_DOBLabel_0">Trash</span>
                             </td>
                         </tr>
                       </table>
                     </div>
                 </td>
             </tr>
          </table>
4

1 に答える 1

5

これを試すことができますか

$(".droppable1").droppable({   
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function (event, ui) {
                var drag_id = $(ui.draggable).attr("id");
                var targetElem = $(this).attr("id");
                deleteMe = true;            
                $(this)
                  .addClass("ui-state-highlight")
                  .find("p")
                  .html("Dropped! inside " + targetElem);

                $(ui.helper).remove(); //destroy clone
                $(ui.draggable).remove(); //remove from list    
            }
        });

uiメソッドで宣言されたオブジェクトを使用して、現在ドラッグされている要素とそのクローンにアクセスできますdrop。

于 2013-05-24T12:03:17.273 に答える