бесконечный перетаскиваемый элемент с перетаскиваемым JQuery UI - PullRequest
Новая
       2

бесконечный перетаскиваемый элемент с перетаскиваемым JQuery UI

0 голосов
/ 21 февраля 2019

Я пытаюсь создать элемент, который увеличивается и уменьшается при перетаскивании.Это работает путем перетаскивания вверх и вправо.Только это не работает, перетаскивая влево и вниз.

Подробнее см. Фрагмент кода. 

    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>

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

После небольшого исследования я обнаружил, что могу сделать это и с background-position.Так что сейчас я использую это как решение.Перетаскивая зеленый 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>
0 голосов
/ 21 февраля 2019

приведенное ниже решение немного нарушает анимацию, но создает спорный фон.

Ваша проблема в том, что верхний и левый редактируются после завершения перетаскивания, поэтому я попытался отредактировать их с помощью функции тайм-аута,

Смотрите ниже фрагмент: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...