Question

我正在尝试在具有div：auto的div中包含可调整大小/可拖动的对象。（这样对象就可以像div一样停留在页面上，并随着div上下滚动）

为此，我必须将项目的位置设置为相对；不幸的是，这会影响我调整大小时的情况，因为调整大小会影响所有先前的对象。

这里是我要测试的样本：

<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="jquery-ui.css">
    <style>
        .dropZone {

            width: 750px;
            height: 750px;
            padding: 0;
            overflow:hidden;
            margin: 0;
            background: #aaa;
        }
        .forCanvas {
            height: 500px;
            width: 500px;
            overflow: hidden;
            overflow: auto;
            padding: 20px;
            background: white;
            border: 1px solid #d9d9d9;
            border-radius: 5px;
        }
        .block {
            width: 80px;
            height: 60px;
            background: #d9d9d9;
            box-sizing:border-box;
            position: relative;
            align-content: center;
            overflow: hidden;
        }
        .block h3 {
                text-align: center;
                margin: 0;
                font-size: 15px;
                background: #d9d9d9;
                border: none;
                position: absolute;
            }

    </style>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


</head>

<body>
    <div class="forCanvas" >
        <div class='block'><h3>Object1</h3></div>
        <div class='block'><h3>Object2</h3></div>
        <div class='block'><h3>Object3</h3></div>
        <div  class="dropZone ">
        </div>
    </div>


    <script>

            $(function(){

                $(".block") 
                    .draggable()
                    .resizable();   
            });


        </script>
</body>
</html>

您还需要jquery-ui.css来查看调整大小的句柄：

This is the link to download the jquery zip that has the jquery.css file

我知道将.block位置设置为绝对会解决尺寸调整问题，但是当我滚动时，它们不会停留在div上。

可滚动div上可调整大小的jQuery-ui

0 个答案: