Question

我仍然是jQuery的新手并且有一个问题。我正在尝试实现一种“拖放”方法，用户可以将项目拖放到一个列表中，然后将它们放入另一个列表中的“存储桶”中。我似乎把拖动部分放下了，但有两件事让我错误。首先，我似乎无法删除被拖动的“克隆”，其次我无法从“可拖动”列表中删除原始项目。贝娄是我的代码（在ASP.Net中呈现之后。“

我正在使用以下jQuery库：

1.4.2 /的jquery.js，jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.draggable.js
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    
            }
        });

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

在jQuery的拖放中删除克隆并删除draggable

1 个答案: