jquery - jQuery 1.4.2/jQuery UI droppable remove(); 问题,具有 IE 或者错误?

  显示原文与译文双语对照的内容
0 0

我正在使用 jQuery ( j 是. noConflict() )/jQuery UI 1.8.5 and我在下面的代码中遇到了一个问题。

在 Chrome 。Firefox 和Safari中运行得很好,但在 IE 中却没有。 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();

});

谁来帮我谢谢。

时间: 原作者:

0 0

我也有这个问题- 我不能从drop事件移除元素,但是我可以在sortables事件( 这是最后一次被触发的)的停止中做。 这里是一个固定的版本,位于顶部。 我已经将启动和停止事件添加到可以排序的位置,以及传递到的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();

0 0

它似乎在 IE6,IE7和 IE8 ( 。 live示例) 上工作,使用下面的代码( 仅添加 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 。

原作者:
...