jQuery UI, перетаскиваемый с помощью CSS-отсечения

0

У меня есть следующий (очень упрощенный) HTML, сгенерированный сценарием, который я не контролирую:

<span style="display: inline-block; position: relative; width: 4em; height: 0px;">
    <span style="position: absolute; clip: rect(1em 1000em 2em -0.5em); top: -2em; left: 0;">
        <span>
            <span class="to-be-dragged" style="position: relative;">
                content
            </span>
        </span>
    </span>
</span>

Я хочу сделать .to-be-dragged draggable с jQuery UI. Код для этого будет примерно таким:

$(".to-be-dragged").draggable()

К сожалению, один из родительских пространств моего перетаскиваемого диапазона имеет свойство clip. Это приводит к исчезновению перетаскиваемого span при выходе из отсеченной области (поскольку overflow скрыто как требование clip). Я попытался просто удалить clip на родительском span, но это привело к увеличению размера отсеченного родительского span и закрытию существующего содержимого, которое мне нужно было бы оставаться доступным. Таким образом, свойство clip должно либо оставаться, либо заменяться чем-то, что имеет тот же эффект.

Я не уверен, как согласовать clip и jQuery UI draggable таким образом, что обрезанный span остается ограниченным/маленьким, но перетаскиваемый span можно вытащить из родителя.

Теги:
jquery-ui-draggable

1 ответ

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

Я нашел решение!

Я добавил helper: "clone" и appendTo: "#parent-div" к свойствам перетаскивания, а затем спрятал исходный элемент в методе start перетаскиваемого объекта, переведя его в метод stop. #parent-div является разделение, которое верхнего уровня span находится внутри. Таким образом, код выглядит так в CoffeeScript:

target.draggable
    start: (event, ui) ->
        # Hide the original variable we are dragging.
        $(event.target).fadeTo(0, 0)

    stop: (event, ui) ->
        # Show the original variable we are dragging.
        $(event.target).fadeTo(0, 1)

    containment: "#parent-div"

    revert: true
    helper: "clone"
    appendTo: "#parent-div"

Или в JavaScript:

target.draggable({
    start: function(event, ui) {
        return $(event.target).fadeTo(0, 0);
    },
    stop: function(event, ui) {
        return $(event.target).fadeTo(0, 1);
    },
    containment: "#parent-div",
    revert: true,
    helper: "clone",
    appendTo: "#parent-div"
});

Ещё вопросы

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