Question

我正在尝试创建一个在拖动时会增大和缩小的元素。向上拖动并向右滑动即可。只能通过拖动到左侧和底部来解决问题。

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

    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>

Answer 1

经过更多研究，我发现我也可以使用背景位置进行此操作。所以我现在用它作为解决方案。拖动绿色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>

Answer 2

下面的解决方案稍微破坏了动画效果，但产生了有争议的背景。

您的问题是拖动完成后对顶部和左侧进行了编辑，所以我尝试使用超时功能对其进行编辑，

请参见以下代码段：

let newtop = newleft = 0;
let dataMain;
var move = {
  drag: function() {
    main = $('main');
    main.draggable({
      drag: function(event, ui) {

        newtop = Math.abs(ui.position.top);
        newleft = Math.abs(ui.position.left);
        
        $(this).css({
          'padding-right': newleft,
          'padding-bottom': newtop,
        });
        setTimeout(function(){
          main.css({
            'top':-newtop,
            'left':-newleft
          })
        },1);
      },
      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');
  background-repeat: repeat;
}

<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>

jQuery UI UIDragable的无限可拖动元素

2 个答案: