Перетаскивание элемента Javascript с помощью пользовательского интерфейса jQuery

Question

У меня есть <div>, который отображает график внутри.Иногда этот график становится слишком большим для <div>, поэтому мне нужно, чтобы пользователи могли взять график с помощью мыши и переместить его.Я нашел jQuery UI Draggable и подумал, что это то, что мне нужно.Было достаточно легко заставить работать основы, однако у меня возникли проблемы с правильным решением.

В идеале график можно перетаскивать только для выявления скрытых частей.Например, если справа скрыто больше графика, вы можете перетащить его влево и увидеть эту скрытую часть.Но тогда вы больше не сможете перетащить его влево, как только все направо станет видимым.Как мне реализовать что-то подобное с помощью jQuery UI Draggable?Является ли это возможным?Является ли jQuery UI подходящим инструментом для этого?

Меньше, чем идеально, но все же хорошо, вы можете перетаскивать график куда угодно, даже если график достаточно мал, чтобы поместиться в родительский элемент <div> и ничегоскрыт.Я даже не могу заставить это работать правильно.Что происходит, я могу просто не указывать опцию containment.Тогда график не ограничен. Теперь проблема в том, что граф <div> имеет только определенный размер (ширина 100% и высота родительского элемента <div>).Узлы размещены с абсолютным позиционированием вне этого размера.Затем, когда вы будете перетаскивать график, чтобы показать эти скрытые узлы, вы больше не сможете перетаскивать график ... потому что теперь вы щелкаете за пределами графика <div>.

Возможно, у меня может быть контейнер графика<div>, с которым я связывался, чтобы все было правильно и динамически изменял размер этого контейнера div при добавлении или удалении узлов. Или я могу реализовать это без пользовательского интерфейса jQuery, просто используя событие mousemove. Какой наилучший подход?Есть еще одна хорошая библиотека для этого?

Answer 1

Я думаю, это то, что вы ищете - ваш контейнер должен быть overflow:hidden, ваш график будет содержаться в чем-то с шириной и высотой, и кроме этого вам просто нужно вычислить поле «ограничение», которое будет .offset() контейнера, добавляя «дополнительное пространство» вычисляющей IE «переполненной» части разрешить перетаскивание только из offset.left + container.innerWidth() - draggable.width() -> offset.left

Теперь, если какое-либо из этих ограничений уже «подходит», вам нужно убедиться, что оно «обнуляет» его до смещения, и, если они оба подходят, пропустите добавление перетаскиваемого ... Сложите все вместе и вы получите

var contain = $("#container"),
    big = $("#bigthing"),
    offset = contain.offset(),
    // calculate the "constraints"
    constraints = [
        offset.left + contain.innerWidth() - big.width(),
        offset.top + contain.innerHeight() - big.height(),
        offset.left,
        offset.top
    ],
    // it "fits" if our left/top constraint is higher or equal to the right/bottom
    fitsX = constraints[0] >= constraints[2],
    fitsY = constraints[1] >= constraints[3];


if (!(fitsX && fitsY)) {
    if (fitsX) {
       constraints[0] = constraints[2];
    }
    if (fitsY) {
       constraints[1] = constraints[3];
    } 
    big.draggable({
        containment: constraints
    });
}

поиграл: http://jsfiddle.net/gnarf/jqy2b/1/

Если вам нужно динамически изменить размер перетаскиваемой вещи, просто пересчитайте параметр сдерживания!