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

Question

我有多个用于在网页上上传文件的拖放区

如何在将文件拖入浏览器后立即突出显示所有拖放区元素，以便用户知道将文件拖放到何处？当一个文件被拖到其中一个拖放区时，我需要添加一个额外的 class 来指示用户可以释放文件

更新

kurideja 为我指明了 Dragster 的正确方向

https://github.com/bensmithett/dragster

现在差不多可以用了:)

如果您拖过一个拖放区并在不释放文件的情况下拖回，所有拖放区都会隐藏

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

由dt.types.indexOf引起的IE11 bug，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>

Answer 2

您可以使用 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

您可以使用事件的 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');
});

Fiddle: http://jsfiddle.net/mzcqxfq3/

Answer 4

每个元素都会触发一些拖动事件，所以基本上不是一个连续的拖动，而是鼠标下方所有元素的一系列拖动。

只需使用这个插件：http://javascript.hew.io/bensmithett/dragster

Answer 5

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

$(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;
}

如果这不是您想要的，请在评论中告诉我；）

编辑当然你必须在删除文件时删除 class

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

Answer 6

主要问题是：离开 dropzone 区域后，dragster 在 .dropzone 和 window 上触发了 leave 两次 。只需添加 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 7

In my case I wanted to change the style of the class the moment I put a new file and when the dropzone was filled, I did the following:

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

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

on drag change stylesheets for all dropzones (file upload)

javascript

jquery

更新