我试图克隆一个图像,并将它放到一个可下垂的区域,然后继续将该图像放入该可下垂的区域,创建许多该图像的克隆体。似乎可以使用angular-dragdrop库的助手:‘克隆’和占位符:‘保持’,但我没有能够做到这一点,这可能是愚蠢的.
在这里有一个柱塞: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>该示例显示一个按钮和一个图像,它们都是可拖动的。尝试将它们拖到虚线容器中,您将看到它们不会复制到可下垂的区域。但是,如果在onDrop函数上放置一个断点,就会看到它被调用。
另外,我试图将helper设置为‘原始’,这允许它复制,但是图像当然会消失(移动)到虚线区域,但我认为奇怪的是,这是看dom,您会注意到它没有移动,因为这个购物车示例显示了项目的移动。
http://codef0rmer.github.io/angular-dragdrop/#/cart
如能提供任何协助,将不胜感激。
发布于 2015-05-19 18:02:49
要使交换正常工作,需要将ng-model设置为可拖的和可下垂的
vm.list1 = {'title': 'Just a button here!', drag: true};
vm.something = [];我只修好了按钮:http://plnkr.co/edit/oGD1My
https://stackoverflow.com/questions/30171622
复制相似问题