Question

我正在开发一个HTML5友好的拖放系统，而且我遇到了另一个似乎毫无意义的谜......

系统正在使用Edge - 当我模拟IE8时遇到这个最新问题。

我有一套＆＃39; .draggable＆＃39;获得以下侦听器的div：

$(document).ready(function() {
    $('#reset-button').click(resetDraggables);
    if (!dragAndDropSupported()) {
        var $draggables = $('.draggable');
        $draggables.each( function (index) {
            $(this).mousedown( jQueryStartDrag );
        });               
    }
}

可以通过点击重置＆＃39;将可拖动的人员发回原来的位置。按钮。一切正常。

问题是 - 任何被发送回原点的div都不再可拖动。即使我在重置函数中重新附加了侦听器，它也不会触发。再一次，这个问题只发生在我模仿IE8并且我没有在我的代码中的任何地方删除监听器时。

function resetDraggables() {
    if ( !$('#reset-button').hasClass('inactive') ) {
        var $dropTargets = $('.drop-target');
        $dropTargets.each(function (index) {
            var draggableId = $(this).attr('data-contains');
            var $originDraggable = $('#' + draggableId);
            if ($originDraggable.attr('id')!=undefined) {
                var $droppedDraggable = $(this).find('.draggable');
                $droppedDraggable.remove();
                $originDraggable.removeClass('inactive').addClass('draggable').attr('draggable', 'true').css('filter', 'alpha(opacity=100)').hide().fadeIn('fast');
                $('#' + draggableId).mousedown( jQueryStartDrag );
                $(this).removeClass('occupied').attr('data-contains', '');
                $('#reset-button').addClass('inactive');
            }
        });
    }
}

我已经意识到导致问题的$ droppedDraggable.remove（）行。我不确定为什么删除ONE对象的行会从另一个对象中删除侦听器。 $ droppedDraggable对象是从另一个克隆的;这是导致这个问题吗？

有什么想法可能会发生什么？

Answer 1

好的，所以我用...替换了jQuery remove（）行。

var droppedDraggable = document.getElementById('dropped-' + draggableId);
droppedDraggable.outerHTML = "";

......这就是诀窍。我猜测，当一个对象从另一个被克隆时，对象之间必然存在一些隐藏的关联，并且删除（）一个将mousedown侦听器从另一个移除。

如果有人有更好的理论，请随时告诉我，但这似乎解决了这个问题。

修改
我刚刚意识到上面修复了IE8中的问题，但没有在9.中解决了！如果有人对我的代码中如何不包含一堆特定于浏览器的工作有任何指示，我会非常渴望听到它们。感谢。

为什么jQuery.remove（）从其他div元素中删除mousedown listener？

1 个答案: