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
Post a Comment