JQuery addClass 在 Firefox 中不起作用

JQuery addClass not working in Firefox

本文关键字：不起作用 Firefox addClass JQuery      更新时间：2023-09-26

我看过很多关于这个的帖子，但没有一个能给我带来解决方案;

我已经在我的网站中实现了拖放功能。当我拖动到有效容器上方时，我会向其添加一个类。

容器的 html;

<div id="boxL" class="boxL" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">

现在，当 ondragover 事件被触发时，它会调用此 JavaScript

function allowDrop(ev) {
    ev.preventDefault();
    var id = event.target.id;
       $(document).ready(function(e){ 
       $('#'+id).addClass('dotted');
    });
}

还有 css 类;

.dotted{
  border: 5px dotted #212121;  
}

它适用于所有浏览器，但不适用于火狐！？

有什么线索吗？

你可以尝试这样的事情：

$(document).ready(function () {
	var obj = $('.boxL');
	obj.on('dragenter', function (e) {
		e.stopPropagation();
		e.preventDefault();
		$(this).addClass('dragenter');
	});
	obj.on('dragover', function (e) {
		e.stopPropagation();
		e.preventDefault();
	});
	obj.on('drop', function (e) {
		e.preventDefault();
		$(this).addClass('drop');
	});
	$(document).on('dragenter', function (e) {
		e.stopPropagation();
		e.preventDefault();
	});
	$(document).on('dragover', function (e) {
		e.stopPropagation();
		e.preventDefault();
		obj.removeClass('dragenter');
	});
	$(document).on('drop', function (e) {
		e.stopPropagation();
		e.preventDefault();
	});
});
.boxL { width:100px; height:100px; background-color:#bababa; border:5px solid #333}
.dragenter{border: 5px dotted #212121;  }
.drop{border: 5px dotted red;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxL">

相关文章：