interactjs multiple targets

"event.dx" test on multiple targets

by cent cent

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<div class="root1">
   <div class="wrapper">
      <div class="card">
         <img src="https://source.unsplash.com/user/omarlopez1/AjO8d3il_ns/200x200" alt="Collection">
      </div>
      <div class="card">
         <img src="https://source.unsplash.com/user/branislavisko/vChTLx-QIz0/200x200" alt="Collection">
      </div>
      <div class="card">
         <img src="https://source.unsplash.com/user/madisonccompton/FOpqUzWcamc/200x200" alt="Collection">
      </div>
   </div>
</div>
<div class="root2">
   <div class="wrapper">
      <div class="card">
         <img src="https://source.unsplash.com/user/omarlopez1/AjO8d3il_ns/100x100" alt="Collection">
      </div>
      <div class="card">
         <img src="https://source.unsplash.com/user/branislavisko/vChTLx-QIz0/100x100" alt="Collection">
      </div>
      <div class="card">
         <img src="https://source.unsplash.com/user/madisonccompton/FOpqUzWcamc/100x100" alt="Collection">
      </div>
   </div>
</div>
<div class="console"></div>

CSS

.root1, .root2 {
   position: relative;
   overflow: hidden;
   background: lightgray;
   border: 2px solid blue;
   margin: 0;
   padding: 0;
}

.root1 {
   height: 200px;
   width: 400px;
}

.root2 {
   height: 100px;
   width: 300px;
}

.wrapper {
   position: absolute;
   left: 0;
   top: 0;
   width: auto;
   transform: translateX(0);
   white-space: nowrap;
}

.card {
   margin: 0 100px;
   display: inline-block;
}

.console {
   background: #4d4d4d;
   color: white;
   min-height: 10px;
   margin: 10px 0;
   padding: 10px;
}

JavaScript

var printer = $('.console');
var wrapper1 = $('.wrapper').eq(0);
var wrapper2 = $('.wrapper').eq(1);
var X1 = X2 = 0;
var maxLeft1 = maxLeft2 = 0;
var tmp1 = $('.card', wrapper1).length - 1;
$('.card', wrapper1).each(function(ndx){
	if(ndx < tmp1){
   	maxLeft1 += $(this).outerWidth(true);
   }
});
var tmp2 = $('.card', wrapper2).length - 1;
$('.card', wrapper2).each(function(ndx){
	if(ndx < tmp2){
   	maxLeft2 += $(this).outerWidth(true);
   }
});

interact($('.wrapper')[0]).
draggable({
   startAxis: 'x',
   lockAxis: 'x',
   restrict: {
      restriction: "self"
    },
   autoScroll: true,
   inertia: true,
   onstart: function(e){
      var x = parseInt(e.dx * 100, 10) / 100;
      printer.text(x);
   },
   onmove: listener1,
   onend: function(e){
      var x = parseInt(e.dx * 100, 10) / 100;
      printer.text(printer.text() + ', ' + x);
   }
});
 
function listener1(e){
	var dx = parseInt(e.dx * 100, 10) / 100;
   var tmp = X1 + dx;
   
   if(dx < 0){
   	if(tmp <= -maxLeft1){
      	X1 = -maxLeft1;
      }else{
      	X1 = tmp;
      }
      wrapper1.css('transform', 'translateX(' + X1 + 'px)');
   }else if(dx > 0){
   	if(tmp >= 0){
      	X1 = 0;
      }else{
      	X1 = tmp;
      }
      wrapper1.css('transform', 'translateX(' + X1 + 'px)');
   }
   printer.text(printer.text() + ', ' + X1);
}

interact($('.wrapper')[1]).
draggable({
   startAxis: 'x',
   lockAxis: 'x',
   restrict: {
      restriction: "self"
    },
   autoScroll: true,
   inertia: true,
   onstart: function(e){
      var x = parseInt(e.dx * 100, 10) / 100;
      printer.text(x);
   },
   onmove: listener2,
   onend: function(e){
      var x = parseInt(e.dx * 100, 10) / 100;
      printer.text(printer.text() + ', ' + x);
   }
});
 
function listener2(e){
	var dx = parseInt(e.dx * 100, 10) / 100;
   var tmp = X2 + dx;
   
   if(dx < 0){
   	if(tmp <= -maxLeft2){
      	X2 = -maxLeft2;
      }else{
      	X2 = tmp;
      }
      wrapper2.css('transform', 'translateX(' + X2 + 'px)');
  ...