在拖动更改所有dropzones的样式表（文件上传）

Question

我有多个dropzones用于在网页上上传文件

如何在文件拖入浏览器后立即突出显示所有dropzone元素，以便用户知道删除文件的位置？ 当文件被拖放到其中一个下拉区域时，我需要添加一个额外的类来指示用户可以释放该文件

更新

kurideja向我指出了Dragster的正确方向

https://github.com/bensmithett/dragster

现在它几乎可以工作:)

• 如果拖动一个dropzone并向后拖出而不释放文件，则隐藏所有dropzones

http://jsfiddle.net/L7v2f96z/9/

HTML

<div class="dropzone"></div>
<div class="dropzone"></div>

JavaScript的

//    Add/remove class when file is dragged over the dropzone. Hover effect
$('.dropzone').dragster({
    enter : function(){
        $(this).show().addClass('hover');
    },
    leave : function(){
        $(this).hide().removeClass('hover');
    }
});

//    Show/hide dropzones until a file is dragged into the browser window. Hide dropzones after file is dropped or dragging is stopped
var w = $(window).dragster({
    enter : function(){
        $('.dropzone').show();
    },
    leave : function(){
        $('.dropzone').hide();
    }
})
//    Prevent defaults (file is openened in the browser) if user drops file outside a dropzone
.on('dragover', function(e){
    e.preventDefault();
})
.on('drop', function(e){
    e.preventDefault();
    w.trigger('dragleave');
});

CSS

.dropzone {
    width:200px;
    height:200px;
    background:#fff;
    display:none;
    border:2px dashed rgba(0,0,0,0.5);
    box-shadow:0 2px 5px rgba(0,0,0,0.1), inset 0 0 40px rgba(0,0,0,0.1);
    border-radius:2px;
    margin:10px;
}

.dropzone.hover {
    background:#e3e3e3;
}

Answer 1

主要问题是：在离开悬浮窗区域后， 触发高速赛车leave过两次 ，均在.dropzone和window 。 只需添加e.stopPropagation（）即可解决问题。 还有一些修复（在dropzone dragster中删除了show（）和hide（））。 您在Fiddle上的代码以及下面的代码 ：

// Add/remove class when file is dragged over the dropzone. Hover effect
$('.dropzone').dragster({
    enter: function() {
        $(this).addClass('hover');
    },
    leave: function(e) {
        e.stopPropagation(); //-- Critical point
        $(this).removeClass('hover');
    }
});

// Show/hide dropzones until a file is dragged into the browser window. Hide dropzones after file is dropped or dragging is stopped
var w = $(window).dragster({
    enter: function() {
        $('.dropzone').show();
    },
    leave: function() {
        $('.dropzone').hide();
    }
})
// Prevent defaults (file is openened in the browser) if user drop file outside a dropzone
.on('dragover', function(e) {
    e.preventDefault();
})
    .on('drop', function (e) {
    e.preventDefault();
    w.trigger('dragleave');
});

Answer 2

您可以在dragover上使用e.originalEvent.pageX和e.originalEvent.pageY ，并检查它是否在框的范围内。 在这个例子中，我复制了dropzone，我知道div的宽度和高度，所以我可以硬编码条件。 您将不得不想出一种方法来存储掉落区域的位置（顶部和左侧）并将其用于比较。

var drag_timer;
$(document).on('dragover', function (e) {
    var dt = e.originalEvent.dataTransfer;

    if (dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('Files'))) {
        if (e.originalEvent.pageX <= 200 && e.originalEvent.pageY <= 200) {
            $('.dropzone').removeClass('highlight');
            $('.dropzone:eq(0)').addClass('highlight');
        } else if (e.originalEvent.pageX <= 400 && e.originalEvent.pageY <= 400) {
            $('.dropzone').removeClass('highlight');
            $('.dropzone:eq(1)').addClass('highlight');
        } else {
            $('.dropzone').removeClass('highlight');
        }

        $('.dropzone').show();
        window.clearTimeout(drag_timer);
    }
})
.on('dragleave', function (e) {
  drag_timer = window.setTimeout(function () {
    $('.dropzone').hide();
  }, 50);
});

演示小提琴

Answer 3

一些拖拽事件在EACH元素上触发，因此基本上没有一个连续的拖拽，而是拖拽鼠标下方所有元素的一系列拖拽。

只需使用此插件： http ： //javascript.hew.io/bensmithett/dragster

Answer 4

在我的情况下，我想在我放一个新文件时改变类的风格，当dropzone填满时，我做了以下事情：

.dz-drag-hover , .dz-started {        
        border: 2px solid #0CB598;
    }

Answer 5

您可以使用事件的target成员来获取正确的元素：

var drag_timer;
$(document).on('dragover', function(e){
    var dt = e.originalEvent.dataTransfer;
    if(dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('Files'))){
        $('.dropzone').show();
        window.clearTimeout(drag_timer);
    }
})
.on('dragleave', function(e){
    drag_timer = window.setTimeout(function(){
        $('.dropzone').hide();
    }, 50);
});

$('.dropzone')
.on('dragenter', function(e){
    $(e.originalEvent.target).addClass('highlight');
})
.on('dragleave', function(e){
    $(e.originalEvent.target).removeClass('highlight');
});

小提琴： http ： //jsfiddle.net/mzcqxfq3/

Answer 6

我的解决方案与你的方法非常相似。 当文件被拖入窗口时，将css类添加到包含所有放置区的元素（如果需要，则为body）。 然后，您可以相应地设置拖放区域的样式：

$(document).on('dragover', function(e){
    var dt = e.originalEvent.dataTransfer;
    if(dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('Files'))){
        $('body').addClass('dragging'); // Adding a class to the body
    }
})
.on('dragleave', function(e){
    $('body').removeClass('dragging')
});

css将是：

/* style the drop-zone */
.dropzone {
    height:200px;
    width:200px;
    display:none;
    border:2px dashed black;
}

/* show the dropzone when file is dragged into window */
body.dragging .dropzone{
    display:block;
}

/* highlight box when hovered but only when file is dragged */
body.dragging .dropzone:hover{
    background:gray;
}

如果这不是你想要的请求请在评论中告诉我;）

编辑当然，您必须在文件被删除时删除该类

$(document).on('drop', function(event) {
    $('body').removeClass('dragging');
}

Answer 7

1. 由dt.types.indexOf引起的IE11错误， e.originalEvent.dataTransfer.types是ie中的DOMStringList对象。 所以你应该使用dt.types.contains而不是dt.types.indexOf 。

以下作品：

 var drag_timer; $(document).on('dragover', function(e) { var dt = e.originalEvent.dataTransfer; if (dt.types != null && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : (dt.types.contains('Files') || dt.types.contains('application/x-moz-file')))) { $('.dropzone').show(); window.clearTimeout(drag_timer); } }) .on('dragleave', function(e) { drag_timer = window.setTimeout(function() { $('.dropzone').hide(); }, 25); }); 

 .dropzone { height: 100px; width: 100px; background: red; display: none; } 

 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <div class="dropzone"></div>