Knockout.js 使用我的“DragEnter”和“Dreagleave”功能在 Firefox 浏览器上拖放有问题

Posted 2023-03-04

【中文标题】Knockout.js 使用我的“DragEnter”和“Dreagleave”功能在 Firefox 浏览器上拖放有问题

【英文标题】：Knockout.js Drag and Drop having issues on Firefox Browser with my "DragEnter" and "Dreagleave" functions

【发布时间】：2015-11-07 19:13:08

【问题描述】：

我在 Firefox 浏览器中遇到了简单的敲除拖放功能的问题。

问题：

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

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

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>

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

【问题讨论】：

您对 DOM 的更改应该通过更改 observables 来完成，而不是通过 jQuery 直接操作。

【参考方案1】：

这里有一个基于 jQuery 的解决方案来解决 Firefox dragleave-when-entering-a-child 问题： 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/