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

Question

I'm have trouble with cloning an object using interact.js. I can do drag and drop, but there is no way to get clone from the objects.

I put here drag and drop code. Can someone modify it to clone objects?

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

Answer 1

Try this code sample

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);
}
});

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

Question

1 answers

solution1
8 2016-09-14 06:26:44

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

Question

1 answers

solution1 8 2016-09-14 06:26:44

solution1
8 2016-09-14 06:26:44