Как я могу сделать элемент перетаскиваемый, но не его дочерние элементы, используя jQuery UI?

Ответ 1

Вы можете использовать параметр cancel, который принимает селектор для дочерних элементов объекта перетаскивания, который не должен позволять перетаскивать:

$('.draggable').draggable({cancel : 'p'});

JS Fiddle demo.

Ответ 2

В качестве детей могут быть другие элементы, чем p. В этом случае вы должны использовать селектор пространства:

$(".draggable").draggable({cancel: ".draggable *"});

Рабочий пример: JSFIDDLE.

Он использует селектор пространства, который выбирает всех дочерних элементов, будь то дети или внуки. Пример выбора селектора в w3schools.

Недостатком этого является то, что все текстовые файлы должны быть обернуты внутри тега, например. span, div, p. Если они не находятся внутри тега, селектор * не может их сопоставить. Чтобы оставаться открытым текстовым блоком, вы должны использовать более сложный код, потому что CSS и jQuery не содержат селектор для обычных текстовых индексов. Вы можете, например. используйте собственный тег для обертывания текстовых полей. Причина пользовательского node заключается в том, что он уменьшает возможность случайного стирания этого пользовательского элемента (например, при использовании диапазона и т.д.), В этом случае мы называем его "custom":

$(".draggable").draggable({cancel:'.draggable *'})
.contents().filter(function() {return this.nodeType == Node.TEXT_NODE;})
.wrap('<custom></custom>');

Вышеприведенное в JSFIDDLE. Теперь также доступны простые текстовые поля. Вещи меняются, если вы динамически добавляете больше текстовых элементов в элемент перетаскивания. Затем вам придется снова их обернуть.

Ответ 3

Вы можете переопределить функцию start как часть параметров для инициализации. Возвращение ложного здесь будет преждевременным. Чтобы получить доступ к событию мыши, созданному при нажатии, вы можете получить доступ к свойству originalEvent в событии jQuery.

$(".draggable").draggable({
  start: function(event, ui) {
    return event.originalEvent.target === this;
  }
});

Это позволяет перетаскивать только родителя. Вы можете заменить this на любой элемент, который вы хотите быть единственным перетаскиваемым элементом, просто убедитесь, что он сравнивается с dom node.

Пример Plunkr