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

427
November 23, 2016, at 1:45 PM

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

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

I put here drag and drop codes. So can someone modify it to have a clone objects. ?

this is CSS and HTNL codes .

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

So I need to modify this codes to have clone object.

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);
}
});
Rent Charter Buses Company
READ ALSO
Fade Out child div images &amp; Fade In an overlapping parent div image using Javascript

Fade Out child div images & Fade In an overlapping parent div image using Javascript

I’ve created a jsfiddle of my attempt to solve this question here: [nnn]http://jsfiddle. net/oca3L32h/.

401
Bootstrap nav go to section

Bootstrap nav go to section

I want to have a nav element with multiple visible sections and an invisible one, then on the first section have a link (a href) that would programmatically set the invisible nav-section to visible and display it's contents. [nnn]I try to do it like.

415
Questions on PHP,MYSQL,AJAX

Questions on PHP,MYSQL,AJAX

I have encountered a problem, where I planned to get values with javascript which is from mysql. .

317
How to use Bootstrap alerts using AngularJS

How to use Bootstrap alerts using AngularJS

Hi My project works on Djnago and AngularJS. I want include bootstrap alerts once the user submit.

344