Question

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

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

容器的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;  
}

它适用于所有浏览器但不适用于firefox！？

任何线索？

Answer 1

您可以尝试这样的事情：

＆＃13;

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

＆＃13;

.boxL { width:100px; height:100px; background-color:#bababa; border:5px solid #333}
.dragenter{border: 5px dotted #212121;  }
.drop{border: 5px dotted red;  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxL">

＆＃13;

JQuery addClass在Firefox中不起作用

1 个答案: