javascriptangularjsdrag-and-dropangular-dragdrop

angular-dragdrop cloning an image isn't working with helper: 'clone' & placeholder: 'keep'


I'm trying to clone an image and drop it in a droppable area and continue dropping that image into that droppable area creating many clones of that image. Seems like it's possible using angular-dragdrop library with helper: 'clone' & placeholder: 'keep' but I haven't been able to make this happen, it's probably something silly...

Have a plunker here: http://plnkr.co/edit/yWcqgwefVD9Kf3Fpj4uI?p=preview

<div class="container" ng-show="vm.containerWidth !== '' && vm.containerHeight !== ''">
  <div class="row">
    <div class="col-md-9">
      <div style="border:solid #e3e3e3 1px; width:800px; height:{{vm.containerHeight + 40}}px; display: table-cell; vertical-align: middle;">
        <div ng-model="something" data-drop="true" data-jqyoui-options style="border:dashed #000000 1px; width:{{vm.containerWidth}}px; height:{{vm.containerHeight}}px; margin: 0 auto;" jqyoui-droppable="{onDrop: 'vm.drop'}"></div>
      </div>
    </div>
    <br /><br />
    <div class="col-md-3">
      This is a text button, try dragging to dotted box it wont copy:
      <div data-drag="true" jqyoui-draggable="{animate: false, placeholder: 'keep'}" data-jqyoui-options="{revert: 'invalid', helper: 'clone', opacity: 0.35}">
        <div class="btn btn-primary">Just a button here!</div>
      </div>
      <br /><br />
      This is an image, try dragging to dotted box it wont copy:<br />
      <img src="http://nilsagorgroup.com/nil_feed/wp-content/uploads/2013/02/Services-Packages-50x50-50x50.png" data-drag="true" jqyoui-draggable="{animate: false, placeholder: 'keep'}" data-jqyoui-options="{revert: 'invalid', helper: 'clone', opacity: 0.35}" />
    </div>
  </div>
</div>

The example shows a button and a single image that are both draggable. Try dragging them to the dotted container and you will see they don't copy to that droppable area. Although, if you put a breakpoint on the onDrop function you will see it gets called.

Also, I tried to set helper to 'original' and that allowed it to copy but of course the image will disappear (moved) to the dotted area but what I thought was odd about this was looking at the dom you will notice it technically didn't move, since this shopping cart example shows the item moving.

http://codef0rmer.github.io/angular-dragdrop/#/cart

Any assistance would be appreciated.


Solution

  • For swapping to work, you need to set ng-model on both draggable and droppable

    vm.list1 = {'title': 'Just a button here!', drag: true};
    vm.something = [];
    

    I've fixed the button only: http://plnkr.co/edit/oGD1My