Jquery ui - сортування: перетягування за допомогою піктограми 'handle' у межах сортуваного елемента


75

У мене сортувальні файли jquery ui працюють нормально, але в моїх сортуваних елементах є інші інтерактивні елементи. Для того, щоб запобігти випадковому сортуванню під час взаємодії з елементами, що відсортуються, я хотів би якось зробити так, щоб рух перетягування для сортуваних відбувався лише під час перетягування певного елемента всередині сортуваного, наприклад, піктограми "переміщення", яка може знаходитись у верхньому лівому куті кожного сортуваного. Чи можливо це із загальним jqui, чи мені потрібно написати власний хук?

Відповіді:


158

Дескриптор опції плагіна дозволяє визначити, який саме елемент може ініціювати сортування. Ви можете надати селектор або елемент.

Якщо у вас є цей html, .handlerдескриптор для того, щоб розпочати сортування, має бути:

<ul class="sortable">
    <li>
        <span class="handle"></span>
        My element
    </li>
</ul>

Застосуйте такий варіант:

$( ".sortable" ).sortable({ handle: '.handle' });

Ви можете стилізувати елемент ручки як завгодно.


4
OMG не може повірити, що я не бачив цього в документації для сортування, але там це прямо в розділі ОПЦІЇ ...
Ример

Хм, здається, як в IE7 (дивний режим в IE9), він не працює :(. Дескриптор не працює, і оскільки він був обмежений лише дескриптором, сортування тепер вимкнено в IE7 :(. Працює в FF, IE9, Chrome ...
Рімер,

Це з jquery 1.7 та jq ui 1.8
Рімер,

Я згадував, якщо я правильно пам’ятаю, один раз подібну проблему. Мені вдалося застосувати обхідний спосіб для презентації у квитку помилок, але я думаю, що це виправлено в останній jquery ui 1.8.16. Можливо, це не пов’язано, але ці проблеми складно відстежити.
Didier Ghys

2
@RohitSengar. handleвластивість приймає селектор. Я думаю, ви могли б написати щось подібне, { handle: '.handle1, .handle2' }як це зробили б для вибору декількох елементів. Спробувати.
Didier Ghys
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.