Как вставить элементы, перетаскиваемые интерактивными взаимодействиями - PullRequest
Новая
       30

Как вставить элементы, перетаскиваемые интерактивными взаимодействиями

1 голос
/ 10 октября 2019

enter image description here Поведение : привязка ко всем другим перетаскиваемым элементам

Я сделал столько, сколько мог, но не смог оправдать это напересечение. не переходит к другому при применении какой-либо привязки.

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

Я создал скрипку здесь: Fiddle Link

Это мой код JS:

var element = document.getElementById('draggable-element')
var x = 0; var y = 0

var targets = [
    //{ x : 500, y : 350 },
    //{ x : 500, y : 410 },
    //{ x : 620, y : 350 },
    //{ x : 620, y : 410 },

    { x : 500 },
    { x : 620 },
    { y : 350 },
    { y : 410 }
];

const mySnap = interact.modifiers.snap({
  targets: targets,
  range: 20,
  relativePoints: [ 
    { x: 0  , y: 0   },   // snap relative to the element's top-left,
    //{ x: 0.5, y: 0.5 },   // to the center
    { x: 1  , y: 1   }    // and to the bottom-right
  ]
});

interact(element)
  .draggable({
    modifiers: [
      mySnap      
    ],
    inertia: false
  })
  .on('dragmove', function (event) {
    var target = event.target
    // keep the dragged position in the data-x/data-y attributes
    var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
    var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
  
    // translate the element
    target.style.webkitTransform =
      target.style.transform =
        'translate(' + x + 'px, ' + y + 'px)'
  
    // update the posiion attributes
    target.setAttribute('data-x', x)
    target.setAttribute('data-y', y)
  }) 
  .resizable({
    // resize from all edges and corners
    edges: { left: true, right: true, bottom: true, top: true },

    modifiers: [
      mySnap      
    ],

    inertia: false
  })
  .on('resizemove', function (event) {
    var target = event.target
    var x = (parseFloat(target.getAttribute('data-x')) || 0)
    var y = (parseFloat(target.getAttribute('data-y')) || 0)

    // update the element's style
    target.style.width = event.rect.width + 'px'
    target.style.height = event.rect.height + 'px'

    // translate when resizing from top or left edges
    x += event.deltaRect.left
    y += event.deltaRect.top

    target.style.webkitTransform = target.style.transform =
        'translate(' + x + 'px,' + y + 'px)'

    target.setAttribute('data-x', x)
    target.setAttribute('data-y', y)
    target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
  })
  * {
    margin: 0;
    padding: 0;
  }
  
  #draggable-element {
    width: 72px;
    height: 72px;
    background: yellowgreen;
    position: absolute;
    left: 0px;
    top: 0px;
    touch-action: none;
  }

  #guide-box {
    width: 120px;
    height: 60px;
    background: wheat;
    position: absolute;
    left: 500px;
    top: 350px;
  }

  .line-x{
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: tomato;
  }

  .line-y{
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: teal;
  }

  .line-x.xT-line{ top: 350px; }
  .line-x.xB-line{ top: 410px; }
  .line-y.yL-line{ left: 500px; }
  .line-y.yR-line{ left: 620px; }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="guide-box"></div>
    <div id="draggable-element"></div>

    <div class="xT-line line-x"></div>
    <div class="xB-line line-x"></div>
    <div class="yL-line line-y"></div>
    <div class="yR-line line-y"></div>

    <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
...