时间戳

首页 > 解决方案 > 带有jquery ui可拖动的无限可拖动元素

jquery - 带有jquery ui可拖动的无限可拖动元素

问题描述

我正在尝试创建一个在拖动时会增长和缩小的元素。这通过向上和向右拖动来工作。只是它不能通过向左和底部拖动来工作。

有关更多详细信息，请参阅代码片段。

    var move = {
        drag: function () {
            main = $('main');
            main.draggable({
                drag: function (event, ui) {
                    
                    $(this).css({
                        'padding-right': Math.abs(ui.position.left),
                        'padding-bottom': Math.abs(ui.position.top),

                    });
                },
                scroll: false,
            });
        }
    }
    move.drag();
body {
  margin:0;
  overflow:hidden
  }

main {
  width:100vw;
  height:100vh;
  background:url('https://previews.123rf.com/images/kitch/kitch1302/kitch130200221/18077895-an-illustative-grid-graph-pattern-or-background.jpg');
}
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>

<body>
  <main>
    
  </main>
</body>

标签： jqueryjquery-ui

解决方案

经过更多研究后，我发现我也可以使用背景位置来做到这一点。所以我现在用这个作为解决方案。通过拖动绿色 div。

var move = {
        drag: function () {
            main = $('main');
            $('div').draggable({
                drag: function (event, ui) {
                    
                    main.css({
                         'background-position':ui.position.left + 'px ' +  ui.position.top + 'px',

                    });
                },
                scroll: false,
            });
        }
    }
    move.drag();
body {
  margin:0;
  overflow:hidden
  }

main {
  width:100vw;
  height:100vh;
  background:url('https://previews.123rf.com/images/kitch/kitch1302/kitch130200221/18077895-an-illustative-grid-graph-pattern-or-background.jpg');
}
div {
  width:59px;
  height:59px;
  background:green;
  margin:124px;
  position:absolute;
}
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>

<body>
  <main>
      <div>
      </div>
  </main>
</body>

推荐阅读