Question

我正在使用jQuery 1.4.2 （j是.noConflict（）） / jQuery UI 1.8.5，我遇到了以下代码的问题。

这在Chrome，FireFox和Safari中运行良好，但在Internet Explorer中没有。警报（）;触发但是以下行（remove（）;）no。

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

它似乎适用于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 ...

Answer 2

我也有这个问题 - 我无法从drop事件中删除该元素，但我可以从sortables的stop事件（最后触发）中执行此操作。所以这里是顶部原始片段的固定版本。我已经为可排序的事件添加了启动和停止事件，并且传递了一个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();

jQuery 1.4.2 / jQuery UI droppable - remove（）; Internet Explorer问题还是有问题？

2 个答案: