使用类选择器拖放jQuery
使用类选择器拖放jQuery
提问于 2014-11-17 11:37:51
对专家来说，这一定很简单。我对JS/jQuery很陌生。我有一个脚本拖动和复制，我修改它根据我的要求。它是用"id“选择器实现的。我希望使用“类”选择器实现相同的选择器。
这是小提琴演示
$(document).ready(function(){
$('#arsenal').on("dragstart", ( function (e) {
e.originalEvent.dataTransfer.setData("Text", e.target.id);
}));
$('#leftbox').on("dragenter", ( function (e) {
e.preventDefault();
}));
$('#leftbox').on("dragover", ( function (e) {
e.preventDefault();
}));
$('#leftbox').on("drop", ( function (e) {
e.preventDefault();
$(this).empty();
var data=e.originalEvent.dataTransfer.getData("Text");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = "newId";
e.target.appendChild(nodeCopy);
}));
});说明:我需要为一组动态添加的映像(使用JS)实现这一点。所以我不能使用目标图像的Id。我需要上课。我试过了，但没能成功。有人能帮我吗？
提前谢谢你，
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-11-17 11:54:44
下面是您使用类所做工作的基本JSFiddle。
这几乎是一个改变你的选择的问题：
$('.draggableImg').on("dragstart", ( function (e) {
...
});还有一个小问题--如果您已经将图像拖到leftbox，然后将leftbox中的图像拖到leftbox.你会出错的。(在将图像复制到removeClass后，您可能只需要使用leftbox)。
另外，如果你说你的元素没有身份证.然后，您需要传递图像的实际来源，而不是元素ID。
和下面是之一，您总是附加到框，而不是目标(可能是img，刚刚清除)！
Stack Overflow用户
发布于 2014-11-17 11:41:59
类选择器(".class")选择给定类的所有元素。一个元素可以有多个类；其中只有一个必须匹配。
因此，只需用clas选择器替换ids，如下所示：
$('.class').on("dragstart", ( function (e) {
e.originalEvent.dataTransfer.setData("Text", e.target.id);
}));Stack Overflow用户
发布于 2014-11-17 11:46:56
使用‘.js-拖放-项目’和‘.js-拖放-目标’来替换您的div id，我喜欢添加'js-‘，所以我记得它是一个类名，它与Javascript相关联，而不是CSS。
例如：
JS
$('.js-drag-item').on("dragstart", ( function (e) {
e.originalEvent.dataTransfer.setData("Text", e.target.id);
}));HTML
<section class="js-drag-item">
....
</section>
<section class="js-drag-item">
....
</section>
etc您可以使用任意数量的拖放项或拖放项，JS将应用于所有这些项目。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26971853
复制相关文章
相似问题
腾讯云开发者
