клонирование изображения с угловым перетаскиванием не работает с помощником: «клон» и заполнитель: «держать»

Я пытаюсь клонировать изображение и поместить его в удаляемую область и продолжать помещать это изображение в эту область, создавая множество клонов этого изображения. Кажется, можно использовать библиотеку angular-dragdrop с помощником: 'clone' и placeholder: 'keep', но мне не удалось это сделать, наверное, это что-то глупое...

Попробуй здесь: 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, вы увидите, что она вызывается.

Кроме того, я попытался установить для помощника значение «оригинал», и это позволило ему копировать, но, конечно, изображение исчезнет (переместится) в пунктирную область, но что мне показалось странным, так это то, что глядя на дом, вы заметите, что технически это не так. не двигаться, так как этот пример корзины показывает движение товара.

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

Любая помощь будет оценена.


javascript drag-and-drop angularjs angular-dragdrop
person Neil    schedule 11.05.2015    source источник
comment
Кто-нибудь может протянуть руку помощи?   -  person Neil    schedule 15.05.2015

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы обмен работал, вам нужно установить ng-model как для перетаскивания, так и для опускания.

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

Я исправил только кнопку: http://plnkr.co/edit/oGD1My

person codef0rmer    schedule 19.05.2015
comment
Не похоже, что кнопка находится там, где вы ее бросили, но вместо этого она увеличивает список и помещает текст в этот список. Я предполагал, что это будет работать так же, как неклонированная версия... где синяя кнопка будет копироваться. Это просто не поддерживается? - person Neil; 19.05.2015
comment
Просто нужно изменить olli на div со свойствами кнопки, которые были перетащены, и он будет делать то, что я хочу. Благодарю вас! - person Neil; 19.05.2015