jQuery UI 可拖动并在拖动事件上添加类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11724908/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI draggable and adding class on drag event
提问by webworker
I am trying to add a class to the draggable event using jQuery UI.
我正在尝试使用 jQuery UI 向可拖动事件添加一个类。
However the following code that I've written is not working as expected;
但是，我编写的以下代码没有按预期工作；
$(function () {
$('ul.sortable div.draggable').draggable({
start: function(event, ui) { ui.helper.addClass('move'); },
});
});
Essentially I am trying to add a drop shadow (using the move class) to the div.draggable. What am I doing wrong as the drag event works, but the drop shadow does not appear?
本质上，我正在尝试向 div.draggable 添加阴影（使用移动类）。我在拖动事件时做错了什么，但没有出现阴影？
Thanks in advance..
提前致谢..
回答by JasCav
From the jQuery UI Draggable documentation:
. During drag the element also gets a class of ui-draggable-dragging
. 在拖动期间，元素也会获得一类 ui-draggable-dragging
You could just write the CSS to leverage this class as opposed to trying to add a class.
您可以只编写 CSS 来利用这个类，而不是尝试添加一个类。
回答by Alex Neigher
Same CSS inheritance still applies. If you have your own stylesheet include something like
相同的 CSS 继承仍然适用。如果您有自己的样式表，请包含类似的内容
.ui-draggable-dragging{
box-shadow:0 0 2px #000;
}
If you do not have a stylesheet. You can still add this inline within your html files using <style>tags
如果您没有样式表。您仍然可以使用<style>标签在 html 文件中添加此内联
回答by Rahul Gupta
I suppose that we add a new classmy_classon dargging start, then the code should be like:
我想我们在 dargging 开始时添加一个新的classmy_class，那么代码应该是这样的：
$(function () {
$('ul.sortable div.draggable').draggable({
start: function( event, ui ) {
$(this).addClass('my_class');
}
});
});
css:
css：
.my_class{
/* YOUR CLASS CSS */
}
Refer this JSFIDDLEfor adding and removing class on drag start and drag end
请参阅此JSFIDDLE以在拖动开始和拖动结束时添加和删除类
回答by Marco Alonso Friz Palavecino
Try using the option classes: https://api.jqueryui.com/draggable/#option-classes
尝试使用选项类：https: //api.jqueryui.com/draggable/#option-classes
for example:
例如：
$( ".selector" ).draggable({
classes: {
"ui-draggable": "move"
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>