jQuery UI可拖动并在拖动事件中添加类

Question

我正在尝试使用jQuery UI为可拖动事件添加一个类。

但是，我编写的以下代码并没有按预期工作;

$(function () {
    $('ul.sortable div.draggable').draggable({
        start: function(event, ui) { ui.helper.addClass('move'); },
    });
});

基本上我正在尝试向div.draggable添加一个下拉阴影（使用move类）。由于拖动事件有效，但下拉阴影没有出现，所以我做错了什么？提前致谢。

- webworker

---

你能同时发布你的HTML代码吗？ - Giovanni B

Answer 1

从jQuery UI Draggable文档中得知:

在拖动期间，元素还会获得ui-draggable-dragging类。

你可以直接编写CSS来利用这个类，而不必尝试添加一个类。

- JasCav

---

@Blackersoul - CDN中的CSS只是基础CSS。您仍然可以编写自己的CSS（或JavaScript）来利用或更改这些类的默认行为。 - JasCav

Answer 2

我认为我们需要在拖动开始时添加一个新的class my_class，那么代码应该像这样：

$(function () {
    $('ul.sortable div.draggable').draggable({
         start: function( event, ui ) {
              $(this).addClass('my_class'); 
         }
    });
});

CSS：

.my_class{
/* YOUR CLASS CSS */
}

请参考这个JSFIDDLE，学习如何在拖动开始和拖动结束时添加或移除类(class)。

- Rahul Gupta

Answer 3

相同的CSS继承仍然适用。如果您有自己的样式表，请包含类似以下内容：

.ui-draggable-dragging{
    box-shadow:0 0 2px #000;
}

如果您没有样式表，仍然可以使用<style>标签在HTML文件中内联添加样式。

- Alex Neigher

Answer 4

尝试使用选项类：https://api.jqueryui.com/draggable/#option-classes

例如：

$( ".selector" ).draggable({
    classes: {
      "ui-draggable": "move"
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

- Marco Alonso Friz Palavecino