JSFiddle - React, Tailwind, and code Playground

HTML

<div class='app' ng-app="myApp">
  <div class='wrapper' ng-controller="DifferentOptionsModel">
    <div class='tableRow'>
      <div id="containerLeft" class='containerVertical'>
        <div ng-repeat="item in items1">{{item.content}}</div>
      </div>
      <div id="containerRight" class='containerVertical'>
        <div ng-repeat="item in items2">{{item.content}}</div>
      </div>
      <div>
        <div class="tableRow">
          <div class='containerVertical'>
            <pre>Items
          <br/>{{items1 | json}}</pre>
          </div>
          <div class='containerVertical'>
            <pre>Items2:
          <br/>{{items2 | json}}</pre>
          </div>
        </div>
      </div>
    </div>

CSS

.app div {
  border: 1px solid blue;
  width: 200px;
}

/* dragular styles */

.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  width: z-index 9999 !important;
  opacity: 0.8;
}

.gu-hide {
  display: none !important;
}

.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.gu-transit {
  opacity: 0.2;
}

JavaScript

angular.module('myApp', ['dragularModule']).controller('DifferentOptionsModel', ['$scope', '$element', 'dragularService', function TodoCtrl($scope, $element, dragularService) {
  $scope.items1 = [{
    content: 'Move me, but you can only drop me in one of these containers.'
  }, {
    content: 'If you try to drop me somewhere other than these containers, I\'ll just come back.'
  }, {
    content: 'Item 3'
  }, {
    content: 'Item 4'
  }];
  $scope.items2 = [{
    content: 'Item 5'
  }, {
    content: 'Item 6'
  }, {
    content: 'Item 7'
  }, {
    content: 'Item 8'
  }];

  var containerLeft = document.querySelector('#containerLeft'),
    containerRight = document.querySelector('#containerRight');

  function accepts(el, target, source) {
    if (source === containerLeft || source === target) {
      return true;
    }
  }

  dragularService([containerLeft], {
    containersModel: [$scope.items1],
    copy: true,
    //move only from left to right  
    accepts: accepts
  });

  dragularService([containerRight], {
    containersModel: [$scope.items2],
    removeOnSpill: true,
    //move only from left to right  
    accepts: accepts
  });

  $scope.$on('dragulardrag', function(e, el) {
    e.stopPropagation();
    console.log("$(el).find('.fa-heart').hide()");
  });
  $scope.$on('dragulardrop', function(e, el) {
    e.stopPropagation();
    // $('.fa-heart').show();
    $timeout(function() {
      console.log("$scope.updatePlan()");
    }, 50);
  });

}]);


(function e(t, n, r) {
  function s(o, u) {
    if (!n[o]) {
      if (!t[o]) {
        var a = typeof require == "function" && require;
        if (!u && a) return a(o, !0);
        if (i) return i(o, !0);
        var f = new Error("Cannot find module '" + o + "'");
        throw f.code = "MODULE_NOT_FOUND", f
      }
      var l = n[o] = {
        exports: {}
      };
      t[o][0].call(l.exports, function(e) {
        var n = t[o][1][e];
        return s(n ? n : e)
      }, l, l.exports, e, t, n, r)
   ...