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


i'm trying clone image , drop in droppable area , continue dropping image droppable area creating many clones of image. seems it's possible using angular-dragdrop library helper: 'clone' & placeholder: 'keep' haven't been able make happen, it's silly...

have 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">       text button, try dragging dotted box 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 button here!</div>       </div>       <br /><br />       image, try dragging dotted box 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 button , single image both draggable. try dragging them dotted container , see don't copy droppable area. although, if put breakpoint on ondrop function see gets called.

also, tried set helper 'original' , allowed copy of course image disappear (moved) dotted area thought odd looking @ dom notice technically didn't move, since shopping cart example shows item moving.

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

any assistance appreciated.

for swapping work, need set ng-model on both draggable , droppable

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

i've fixed button only: http://plnkr.co/edit/ogd1my


Comments

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -