在jQuery的拖放中删除克隆和删除可拖动

Question

我对 jQuery 还是比较陌生，有一个问题。我正在尝试实现一种“拖放”方法，用户可以将项目拖放到一个列表中，然后将它们放入另一个列表中的“桶”中。我似乎有拖拽的部分，但有两件事导致我出错。首先，我似乎无法删除被拖动的“克隆”，其次我无法从“可拖动”列表中删除原始项目。 Bellow 是我的代码（在 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.

JScript：

    $(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> 

Answer 1

你可以试试这个

$(".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    
            }
        });

您可以使用在您的drop 方法中声明的ui 对象访问当前拖动的元素及其克隆。