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 ...