Question

如何在多个目标/类上使用Jquery“dragenter”事件？

这是正确的方法吗？

$('.list').on('dragenter','.class1, .class2', function(e) { ...

我问，因为这不起作用但maby在代码中还有另一个错误！
我找不到任何关于多个的信息..

Answer 1

我无法看到它不应该起作用的原因，请参阅此处的类似示例：

＆＃13;

$(function(){ 
  $('.list').on('dragenter drop dragover','.class1, .class2', 
      function(e){
        e.preventDefault(); // e.stopPropagation();
        if (e.type=='dragenter')
          $('.out').append(this.innerHTML+' ');})
});

＆＃13;

.class1,.class2 {height: 100px;
           width: 300px;
           border: 1px solid red;}
.out {position:absolute; top:0px; left:330px; width=300px}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
 <div class="class1">one</div>
 <div class="class2">two</div>
</div>
<div class="out"></div>

＆＃13;

在此示例中，您可以看到即使多个事件也可以绑定到多个类。在实际的回调函数中，我然后过滤掉我想要输出的唯一事件（＆＃34; dragenter＆＃34;）。

如果您想避免默认行为（即浏览器更改为拖动文件的位置），您至少应为事件方法e.preventDefault()调用所有三个可能的事件dragenter，{ {1}}和dragover。在某些情况下调用drop也很有用，但在此示例中不是必需的。

多个“dragenter”目标/类？

1 个答案: