Как определить, перетаскиваем ли элемент DOM, и присвоить это значение переменной JavaScript?

Оффтоп javascript
1

Привет всем! У меня возникла проблема с jQuery и JavaScript. Я пытаюсь создать функцию, которая проверяет, можно ли перетаскивать определенные элементы на странице, и сохраняет эту информацию в переменную.

Вот что я попробовал:

$(document).ready(function() {
  $('#кнопкаРедактирования').click(function() {
    var можноПеретаскивать = $('.блок').draggable('option', 'disabled');
    if(можноПеретаскивать == 'true') {
      $('.блок').draggable({
        containment: '#контейнер',
        scroll: false
      });
      $('.блок').resizable({
        maxHeight: 200,
        maxWidth: 200,
        minHeight: 100,
        minWidth: 100
      });
    }
  });
});

Код выполняется без ошибок, но почему-то не работает как надо. Может кто-нибудь подсказать, что я делаю не так? Заранее спасибо за помощь!

2

Я тоже сталкивался с такой проблемой. Вот что можно попробовать:

Вместо проверки ‘option’, ‘disabled’, используй метод is(‘:ui-draggable’). Он вернет true, если элемент можно перетаскивать:

var можноПеретаскивать = $(‘.блок’).is(‘:ui-draggable’);

Еще обрати внимание на сравнение - лучше использовать === вместо ==. И убери кавычки вокруг ‘true’.

Надеюсь, это поможет! Дай знать, если будут еще вопросы.

3

слушай, я тут подумал, может проблема в том, что ты проверяешь можноПеретаскивать сразу после клика? попробуй сначала включить перетаскивание, а потом уже проверять. типа так:

$(‘.блок’).draggable({
containment: ‘#контейнер’,
scroll: false
});

var можноПеретаскивать = $(‘.блок’).draggable(‘option’, ‘disabled’) === false;

if (можноПеретаскивать) {
$(‘.блок’).resizable({
maxHeight: 200,
maxWidth: 200,
minHeight: 100,
minWidth: 100
});
}

кста, еще советую добавить обработку ошибок, мало ли что. удачи с кодом!

4

На самом деле, проблема в логике проверки. Вместо проверки disabled, нужно проверять enabled:

var можноПеретаскивать = $(‘.блок’).draggable(‘option’, ‘disabled’) === false;

Также стоит добавить else для отключения draggable:

} else {
$(‘.блок’).draggable(‘disable’);
$(‘.блок’).resizable(‘disable’);
}

Это должно решить проблему. Удачи в разработке!