确定是否初始化了jQuery UI Draggable。

Is there a way of testing to determine if a jQuery UI draggable class has been initialized?

是否有一种测试方法来确定是否初始化了jQuery UI draggable类?

I have a series of divs with the class "draggable1".

我有一系列的divs与类“draggable1”。

For reasons beyond the scope of this question, I do not want to initialize the class in advance, rather I need to initialize the class the first time one of the divs is selected, which I do in a click event handler. Then, I assume I don't want to keep re-initializing the class every time another div is selected. So, I need to determine if one of the divs has already been clicked and initializing the draggable is not necessary.

出于超出问题范围的原因，我不希望预先初始化类，而是需要在第一次选择div时初始化类，我在单击事件处理程序中就是这样做的。然后，我假设我不希望每次选择另一个div时都重新初始化这个类。因此，我需要确定是否有一个div已经被单击，并且不需要初始化draggable。

Or am I looking at this incorrectly? Should I simply re-initialize the draggable class every time another div is selected?

还是我看错了?我是否应该在每次选择另一个div时重新初始化draggable类?

2 个解决方案

#1

Assuming you are using jQuery UI 1.9+ (specify your version if not), you can retrieve your draggable div data to check if draggable is initialized using :

假设您正在使用jQuery UI 1.9+(如果没有，请指定您的版本)，您可以检索您的draggable div数据，以检查draggable是否使用以下方法初始化:

jQuery('.draggable1').data('ui-draggable');

Your click handler function will look like :

您的单击处理程序函数将如下所示:

$('.draggable1').click(function() {
    var $div = $(this);
    if(!$div.data('ui-draggable'))
        $div.draggable();
});

See it in action in this jsFiddle

在这个jsFiddle可以看到它的作用

Explanation : the jquery UI draggable widget is based on the jQuery UI widget factory and as described in the 'Instance' section of the documentation :

说明:jquery UI draggable widget基于jquery UI widget factory，如文档“实例”部分所述:

The widget's instance is stored using jQuery.data() with the widget's full name as the key.

小部件的实例使用jQuery.data()存储，小部件的全名作为键。

You can also use the :data selector to check if your div element already has a draggable widget bound to it :

您还可以使用:data selector来检查您的div元素是否已经有一个可拖动的小部件绑定到它:

$div.is(':data(ui-draggable)');

#2

2017 version:

2017年版:

Just check using jQuery's hasClass like this:

使用jQuery的hasClass检查如下:

var isDraggable = $(elem).hasClass("ui-draggable");

if (isDraggable) {
//do stuff
}

All draggable elements get the ui-draggable class.

所有可拖动的元素都获得ui可拖动类。

#1