У меня есть следующий (очень упрощенный) 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
можно вытащить из родителя.
Я нашел решение!
Я добавил 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"
});