Question

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

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

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

基本上我正在尝试将一个投影（使用移动类）添加到div.draggable。由于拖动事件有效，我做错了什么，但是没有出现投影？

提前致谢..

Answer 1

来自jQuery UI Draggable documentation：

。在拖动过程中，元素也会获得一组ui-draggable-dragging

您可以编写CSS来利用此类，而不是尝试添加类。

Answer 2

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

的内容

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

如果您没有样式表。您仍然可以使用<style>标记

在html文件中内联添加此内容

Answer 3

我想我们在dargging start上添加了一个新的class my_class ，然后代码应该是这样的：

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

的CSS：

.my_class{
/* YOUR CLASS CSS */
}

请参阅此JSFIDDLE，了解在拖动开始和拖动结束时添加和删除类

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>

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

4 个答案: