Выровнять перетаскиваемый элемент в сетке, которая начинается с позиции родителя

0

У меня есть HTML-структура:

<body>
    <div id="board">
        <div id="block" />
    </div>
</body>

#board можно расположить в любом месте.

Например, давайте предположим, что это position: relative; left: 3px; top: 7px; position: relative; left: 3px; top: 7px; (обратите внимание, что top & left не является умножением на 10), у body есть margin: 0, padding 0.

Я хочу, чтобы мой #block был привязан к сетке 10px x 10px. Но эта сетка должна начинаться в верхнем левом углу родителя (#board), а не в верхнем левом углу страницы!

Поэтому он должен привязать мой # #block к (3,7), (13, 17), (23, 27),... вместо (0,0), (10, 10), (20, 20)....

Как его достичь?

Когда я использую:

jQuery(value).draggable({
    containment: "#board",
    grid: [10,10],
    snap: "#board"
});

Он привязывается к сетке 10px x 10px верхнем левом углу страницы, а не #board (и только дополнительно привязывается к краям #board, что не является решением).

Теги:
jquery-ui-draggable
draggable

2 ответа

2
Лучший ответ

Похоже, у вас есть правильная идея. Если вы позиционируете #block относительно #board и следуете совету Shningamae, установив "привязку" к истине, вы достигнете желаемого результата. Вы можете проверить результат с помощью метода смещения jQuery:

$('#block').draggable({
    containment: "#board",
    grid: [10,10],
    snap: true,
    stop: function() {
        var offset = $(this).offset();
        console.log("Top: " + offset.top + " Left: " + offset.left);
    }
});

Вот пример: http://jsfiddle.net/63G8H/

Поделиться
  • 0
    +1 например. У меня даже не было одного: D
1

Snap - это логическое значение, которое

Если установлено значение селектора или true (эквивалентно ".ui-draggable"), перетаскиваемый объект будет привязываться к краям выбранных элементов, когда он находится рядом с краем элемента.

По умолчанию: false

Я думаю, что ваш параметр оснастки должен быть "правдой".

Также у нас есть еще один вариант для оснастки:

SNAPMODE

Определяет, к каким краям элементов привязки привязывается перетаскиваемый объект. Игнорируется, если привязка ложна. Возможные значения: "внутренний", "внешний", "оба",

По умолчанию: "оба"

Источник: JQuery SDK Draggable

Поделиться
  • 0
    Большое спасибо! Я был слеп к этому варианту "оснастки". К сожалению, я могу отметить только один anserw, и даже когда ты был первым, sillfishes дал более сложный (так что я думаю, что в будущем люди найдут его более полезным). +1 за ссылку на документацию и быстрый ответ :)
  • 0
    @PolGraphic не имеет значения. Он это заработал;)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню