如何使用interaction .js拖放和克隆对象

How to Drag, Drop and Clone an object using interact.js

本文关键字：对象拖放何使用 interaction js 更新时间：2023-09-26

我在使用interaction .js克隆对象时遇到了麻烦。我可以做拖放，但是没有办法从对象中获得克隆。

我在这里放了拖放代码。有人可以修改它来克隆对象吗?

#drag-1, #drag-2 {
  width: 20%;
  height: 10%;
  min-height: 6.5em;
  margin: 10%;
  background-color: #29e;
  color: white;
  border-radius: 0.75em;
  padding: 4%;
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}
#drag-me::before {
  content: "#" attr(id);
  font-weight: bold;
}
    top:35px; left:40px; width:50px; height:50px;
    z-index:99; background-color:#44ebfa;
}

<html>
<head>
	<title>test 1 </title>
	<!--<script type="text/javascript" src="d3-js/d3.min.js"></script>-->
	<script type="text/javascript" src="www.googledrive.com/host/0B4A7r4wXVSe-SDdVdlNtbnhFZ2s"></script>
	<link rel="stylesheet" type="text/css" href="test1_css1.css">
</head>
<body>
	
	<script>
	
// target elements with the "draggable" class
interact('.draggable')
  .draggable({
    // enable inertial throwing
    inertia: true,
    // keep the element within the area of it's parent
    restrict: {
      restriction: "parent",
      endOnly: true,
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    },
    // call this function on every dragmove event
    onmove: dragMoveListener,
    // call this function on every dragend event
    onend: function (event) {
      var textEl = event.target.querySelector('p');
      textEl && (textEl.textContent =
        'moved a distance of '
        + (Math.sqrt(event.dx * event.dx +
                     event.dy * event.dy)|0) + 'px');
    }
  });
  function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        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);
  }
  // this is used later in the resizing demo
  window.dragMoveListener = dragMoveListener;
	</script>
		<div id="drag-1" class="draggable">
		  <p> You can drag one element </p>
		</div>
		<div id="drag-2" class="draggable">
			<p> with each pointer </p>
		</div>

</body>
</html>

试试这个代码示例

interact('.draggable').draggable({
    inertia: true,
    restrict: {
      restriction: "#visualizer-panel",
      endOnly: true,
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    },
    onmove: function (event) {
      var target = event.target;   
      var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
      var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
      target.style.webkitTransform =
      target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    },
    onend: function(event) {
        console.log(event);
    }
}).on('move', function (event) {
var interaction = event.interaction;
if (interaction.pointerIsDown && !interaction.interacting() && event.currentTarget.getAttribute('clonable') != 'false') {
  var original = event.currentTarget;
  var clone = event.currentTarget.cloneNode(true);
  var x = clone.offsetLeft;
  var y = clone.offsetTop;
  clone.setAttribute('clonable','false');
  clone.style.position = "absolute";
  clone.style.left = original.offsetLeft+"px";
  clone.style.top = original.offsetTop+"px";
  original.parentElement.appendChild(clone);
  interaction.start({ name: 'drag' },event.interactable,clone);
}
});