更新

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之后，离开了dropzone区域后， dragster触发了window两次。只需添加 e.stopPropagation（）即可解决问题。还有一些修复（在dropzone dragster中删除了show（）和hide（））。您的code on 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);
});

Demo Fiddle

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

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

以下作品：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

更新

7 个答案: