Question

我有一个div标签，其中包含：

id="ipad" style="background-image: url(images/large-ipad.png); -ms-transform: rotate(90deg);
        background-repeat: no-repeat; width: 511px; height: 356px; padding: 41px 67px 41px 67px;
        margin: auto;"

并在div内部有一个带

的span标记

id="lbl1" style="-ms-transform:rotate(90deg)">

和span标签之间的一些文字

和javascript for it：

$(document).ready(function () {          
        $('#lbl1').draggable({
            containment: 'parent',
            scroll: false               
        });
    });

基本上我想做的是我有一个div标签，背景中有ipad图像。现在我有两个选项来旋转div标签1.lanscape和2.portrait。我通过将css:-ms-transform:rotate(90deg)应用于div标签来实现div标签的旋转，但是在旋转之后发生的事情是draggable无法正常工作，它被拖到父级之外，甚至文本旋转都不起作用。

你可以帮我解决这个问题吗？基本上我希望可拖动的文本与div旋转一起旋转，draggable应该正常工作。

Answer 1

基本上事情不会这样，

您需要定义各种尺寸，除非用户将浏览您的应用程序你必须使用新的css媒体查询

@media screen and (min-device-width: 480px) { your css for this query goes here }
@media orientation (landscape or portrait){ ... }

如何使用旋转css和jQuery draggable ASP.NET

1 个答案: