jQuery 1.4.2/jQuery UI droppable - remove（）;問題與Internet Explorer或錯誤？

Question

我正在使用jQuery 1.4.2 （j是.noConflict（））/jQuery UI 1.8.5，我遇到以下代碼的問題。

這在Chrome，FireFox和Safari中運行良好，但在Internet Explorer中無效。 alert（）;但是下面的行（remove（）;）沒有。

XHTML標記：

<div class="mainarea"> 
    <div class="dnd"> 
     <div class="person dad"></div> 
     <div class="person mum"></div> 
    </div> 
</div> 

<div class="tools"> 
    <div class="person dad"></div> 
    <div class="person mum"></div> 
    <div class="person boy"></div> 
    <div class="person girl"></div> 
    <div class="bin"></div> 
</div> 

Javascript代碼：

j(document).ready(function(){ 

    // make the source item draggable 
    j('.tools .person').draggable({ 
     revert: "invalid", 
     helper: "clone" 
    }); 

    // the target drag n'drop area 
    j('.dnd').droppable({ 
      accept: ".tools > .person", 
      revert: "invalid", 
      activeClass: "active", 
      drop: function(event, ui) { 
       //copy from source and make it replaceable by another one 
       var obj = ui.draggable.clone().droppable({ hoverClass: "active", accept: ".tools .person" }); 

       // in case of replace 
       if(j(".dnd > .person.active").size()) 
        j(".dnd > .person.active").replaceWith(obj); 
       else // in case of new or limit reached 
        if((j(".dnd > .person.active").size() == 0) && (j(".dnd > .person").size() < 4)) 
         obj.appendTo('.dnd'); 
      } 
     }); 

    // the bin to delete the selected persons 
    j('.bin').droppable({ 
      accept: ".dnd > .person", 
      hoverClass: "active", 
      drop: function(event, ui) { 
          alert('debug'); 
       ui.draggable.remove(); 
      } 
     }); 

    // makes drag n'drop is sortable 
    j(".dnd").sortable({ placeholder: 'empty' }); 

    //helpers 
    j(".dnd").disableSelection(); 

}); 

有人可以幫助我嗎？ 謝謝。

Answer 1

我也有這個問題 - 我不能刪除元素從drop事件，但我可以做它形成了可排序的停止事件（最後被觸發）。所以這裏是頂部原始代碼片段的固定版本。我添加了可排序的開始和停止事件，以及傳遞的deleteMe標誌：

deleteMe = false; 

// make the source item draggable 
j('.tools .person').draggable({ 
    revert: "invalid", 
    helper: "clone", 

start: function(event, ui) { 
    deleteMe = false; 
} 
}); 

// the target drag n'drop area 
j('.dnd').droppable({ 
     accept: ".tools > .person", 
     revert: "invalid", 
     activeClass: "active", 
     drop: function(event, ui) { 
      //copy from source and make it replaceable by another one 
      var obj = ui.draggable.clone().droppable({ hoverClass: "active", accept: ".tools .person" }); 

      // in case of replace 
      if(j(".dnd > .person.active").size()) 
       j(".dnd > .person.active").replaceWith(obj); 
      else // in case of new or limit reached 
       if((j(".dnd > .person.active").size() == 0) && (j(".dnd > .person").size() < 4)) 
        obj.appendTo('.dnd'); 
     } 
    }); 

// the bin to delete the selected persons 
j('.bin').droppable({ 
     accept: ".dnd > .person", 
     hoverClass: "active", 
     drop: function(event, ui) { 
     deleteMe = true;        
     } 
    }); 

// makes drag n'drop is sortable 
j(".dnd").sortable({ placeholder: 'empty' , 
          stop: function(event, ui) { 
           if (deleteMe) {ui.item.remove()} 
          } }); 

//helpers 
j(".dnd").disableSelection(); 

Answer 2

它似乎對IE6，IE7和IE8（live example）工作，與此代碼（只除了是draggable調用）：

jQuery.noConflict(); 
jQuery(function(j) { 

    j('.dnd .person').draggable(); 
    j('.bin').droppable({ 
    accept: ".dnd .person", 
    cursor: "not-allowed", 
    hoverClass: "active", 
    drop: function(event, ui) { 
     alert('test'); 
     j(ui.draggable).remove(); 
    } 
    }); 
});​ 

而這個標記：

<div class='dnd'> 
    <span class='person'>person1</span> 
    <span class='person'>person2</span> 
</div> 
<div class='bin'></div> 

所以該問題似乎存在於您引用的代碼之外。也許上述將有所幫助。創建一個自包含的簡約示例通常會幫助大約90-95％的時間，在此過程中，您會發現哪裏出了問題。另一個5-10％，你會得到一個很好的自包含的東西，你可以發佈到StackOverflow ...