javascript - 使用我的 "DragEnter"和 "Dreagleave"函数在 Firefox 浏览器上进行 Knockout.js 拖放操作时出现问题

Question

我在 Firefox 浏览器中使用简单的删除拖放功能时遇到问题。

问题:

在“dragenter”和“dragleave”上，我正在更改 div 内侧的文本。它在除 Firefox 之外的所有浏览器中都运行良好。问题是当我在“dragenter”中更改文本时，它会自动更改为“dragleave”状态。

请在所有带有“dragenter”和“dragleave”的浏览器中查看下面的 fiddle 。

Fiddle

function ViewModel(){
    var self = this;
    this.dropZones = ko.observableArray([{
        'elements' : ko.observableArray([])  // just to see that the output is correct
    }]);

    this.dragover = function(e){
        console.log('dragOver');
        e.stopPropagation();
        e.preventDefault();
    }

    this.drop = function(e, data){
        console.log('drop');
        e.stopPropagation();
        e.preventDefault();
        var files = e.dataTransfer.files;
        for (var i = 0, f; f = files[i]; i++) {
            data.elements.push(f.name);
        }
        $('.drop_zone').css('background-color', '#ffffff');
        $('.drop_zone').removeClass('over');
        $('.drop_zone').text('Drop files here');
    }

    this.dragenter = function(e, index){
        console.log('dragEnter');
        $('.drop_zone').eq(index).css('background-color', '#00ff00');
        $('.drop_zone').eq(index).addClass('over');
         $('.drop_zone').text('Over on this text soome thing happened');
    }

    this.dragleave = function(e, index){
        console.log('end');
        $('.drop_zone').eq(index).css('background-color', '#ffffff');
                $('.drop_zone').eq(index).removeClass('over');
         $('.drop_zone').text('Drop files here');
    }
}

ko.applyBindings(new ViewModel());

.drop_zone {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding:40px 25px;
    text-align: center;
    font: 20pt bold'Vollkorn';
    color: #bbb;
    height:300px;
    border:1px solid red;
}
.drop_zone.over{
    border: 1px dashed red;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="col-md-12" data-bind="foreach: dropZones">
    <div class="drop_zone" data-bind="event:{
                dragover:   function(data, e){ $root.dragover(e);},
                drop:       function(data, e){ $root.drop(e, $data);},
                dragenter:  function(data, e){ $root.dragenter(e, $index());},
                dragleave:  function(data, e){ $root.dragleave(e, $index());}
            }">Drop files here</div>
    <ul data-bind="foreach: elements" style="height: 100px">
        <li data-bind="text: $data"></li>
    </ul>
</div>

注意:只需将更改的文本悬停并拖动输入图像即可。然后你就会知道发生了什么。

Answer 1

对于 Firefox dragleave-when-entering-a-child 问题，这里有一个基于 jQuery 的解决方案: How to detect the dragleave event in Firefox when dragging outside the window

我已经制作了一个可以在 Firefox 中运行的 Fiddle 版本。基本思想是它保持进入减去叶子的计数，并且当计数 > 0 时您仍处于拖动模式。我还摆脱了 jQuery DOM 摆弄。

最重要的代码位是:

function dropZone() {
    var self = {
        'elements': ko.observableArray([]),
            'style': ko.observable(),
            'text': ko.observable('Drop files here'),
            'enteredCount': ko.observable(0)
        // just to see that the output is correct
    };
    self.isOver = ko.computed(function () {
        return self.enteredCount() > 0;
    });
    return self;
}

和

this.dragenter = function (data, e) {
    data.enteredCount(data.enteredCount() + 1);
    data.text('Over on this text some thing happened');
};

this.dragleave = function (data, e) {
    data.enteredCount(data.enteredCount() - 1);
    data.text('Drop files here');
};

http://jsfiddle.net/hgaow1pq/4/