blocks|key|2494067|text|类选择器(".class")选择给定类的所有元素。一个元素可以有多个类；其中只有一个必须匹配。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2494068|因此，只需用clas选择器替换ids，如下所示：|2494069|$('.class').on("dragstart",+(+function+(e)+{
++++e.originalEvent.dataTransfer.setData("Text",+e.target.id);
}));|code-block|syntax|javascript|2494070|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Class selector (".class") selects all elements with the given class. An element can have multiple classes; only one of them must match.

So simply replace ids with clas selectors, like this:

<pre><code>$('.class').on("dragstart", ( function (e) {
 e.originalEvent.dataTransfer.setData("Text", e.target.id);
}));
</code></pre>

blocks|key|1089213|text|使用‘.js-拖放-项目’和‘.js-拖放-目标’来替换您的div+id，我喜欢添加'js-‘，所以我记得它是一个类名，它与Javascript相关联，而不是CSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1089214|例如：|1089215|JS|1089216|$('.js-drag-item').on("dragstart",+(+function+(e)+{
+++e.originalEvent.dataTransfer.setData("Text",+e.target.id);
}));|code-block|syntax|javascript|1089217|HTML|1089218|<section+class="js-drag-item">
++++....
</section>
<section+class="js-drag-item">
++++....
</section>
etc|1089219|您可以使用任意数量的拖放项或拖放项，JS将应用于所有这些项目。|1089220|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Use something like '.js-drag-item' and '.js-drop-target' to replace your div id's. I like to add 'js-' so I remember it is a class name that has Javascript associated with it rather than CSS.

e.g.

JS

<pre><code>$('.js-drag-item').on("dragstart", ( function (e) {
 e.originalEvent.dataTransfer.setData("Text", e.target.id);
}));
</code></pre>

HTML

<pre><code>&lt;section class="js-drag-item"&gt;
 ....
&lt;/section&gt;
&lt;section class="js-drag-item"&gt;
 ....
&lt;/section&gt;
etc
</code></pre>

You can have as many drag items or drop items as you want and the JS will be applied to all of them

blocks|key|2494119|text|下面是您使用类所做工作的基本JSFiddle。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2494120|这几乎是一个改变你的选择的问题：|2494121|$('.draggableImg').on("dragstart",+(+function+(e)+{
++++...
});|code-block|syntax|javascript|2494122|还有一个小问题--如果您已经将图像拖到leftbox，然后将leftbox中的图像拖到leftbox.你会出错的。(在将图像复制到removeClass后，您可能只需要使用leftbox)。|style|CODE|2494123|另外，如果你说你的元素没有身份证.然后，您需要传递图像的实际来源，而不是元素ID。|2494124|和下面是之一，您总是附加到框，而不是目标(可能是img，刚刚清除)！|2494125|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/daveSalomon/2no0f7db/4/|1|http://jsfiddle.net/daveSalomon/2no0f7db/20/^0|0|N|0|0|0|0|J|7|U|7|17|7|1T|B|2E|7|0|0|1|3|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|18|8|@$A|19|B|1A|M|N]|$A|1B|B|1C|M|N]|$A|1D|B|1E|M|N]|$A|1F|B|1G|M|N]|$A|1H|B|1I|M|N]]|9|@]|C|$]]|$1|O|3|P|5|6|7|1J|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1K|8|@]|9|@$A|1L|B|1M|1|1N]]|C|$]]|$1|S|3|-4|5|6|7|1O|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]]]

<a href="http://jsfiddle.net/daveSalomon/2no0f7db/4/" rel="nofollow">Here's a basic JSFiddle of what you're doing using classes.</a> 

It's pretty much a matter of changing your selctor:

<pre><code>$('.draggableImg').on("dragstart", ( function (e) {
 ...
});
</code></pre>

There's also a minor problem -- if you have dragged an image to the <code>leftbox</code>, and then drag the image in <code>leftbox</code> to <code>leftbox</code>... you'll get an error. (You might just need to <code>removeClass</code> after copying the image to <code>leftbox</code>).

Alterantively, if you're saying that your elements won't have ID's... then you'll need to pass around the actual source of the image, rather than the element ID. Here's an <a href="http://jsfiddle.net/daveSalomon/2no0f7db/19/" rel="nofollow">updated fiddle which does that</a>.

And <a href="http://jsfiddle.net/daveSalomon/2no0f7db/20/" rel="nofollow">here's</a> one where you always append to the box, rather than to the target (which may be the img which has just been cleared)!

This must be a simple one for expert. I am new to JS/jQuery. I have got a script to drag and copy and I modified it according to my requirements. It is implemented with "id" selectors. I want to implement the same using "class" selectors.

Here is the <a href="http://jsfiddle.net/2no0f7db/" rel="nofollow">fiddle demo</a>

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

});
</code></pre>

Explanation:
I have a requirement where I need to implement this for a set of images which are dynamically added(with JS). So I cannot use Id of the target images. I need to use class. I tried but couldn't get it working.
Can anyone help me with this?

Thanks in advance,

jQuery Drag and Drop using class selectors

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

对专家来说，这一定很简单。我对JS/jQuery很陌生。我有一个脚本拖动和复制，我修改它根据我的要求。它是用"id“选择器实现的。我希望使用“类”选择器实现相同的选择器。这是$(document).ready(function(){$('#arsenal').on("dragstart", ( function (e)...

问使用类选择器拖放jQuery
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用类选择器拖放jQueryEN