使用Angularjs在拖放时创建元素副本

<div ng-controller="MyController">
  <div ng-draggable ng-repeat="item in items" drag-data="item" on-drag-start="onDragStart($event)">
    {{ item.name }}
  </div>
  <div ng-dropzone on-drop="onDrop($event)">
    Drop Here
  </div>
</div>

app.controller('MyController', function($scope, $compile) {
  $scope.items = [
    { name: 'Item 1' },
    { name: 'Item 2' },
    { name: 'Item 3' }
  ];

  $scope.onDragStart = function(event) {
    var item = event.target.getAttribute('drag-data');
    var itemElement = angular.element(event.target);
    var cloneElement = itemElement.clone();
    
    // 添加副本元素到拖动效果中
    var dragElement = angular.element(document.getElementById('drag-effect'));
    dragElement.empty().append(cloneElement);

    // 编译并添加副本元素到页面中
    var compiledElement = $compile(cloneElement)($scope);
    angular.element(document.body).append(compiledElement);

    // 设置副本元素的样式
    compiledElement.css({
      position: 'absolute',
      top: event.clientY + 'px',
      left: event.clientX + 'px',
      pointerEvents: 'none'
    });
    
    // 设置拖动效果的样式
    dragElement.css({
      position: 'absolute',
      top: event.clientY + 'px',
      left: event.clientX + 'px'
    });
  };

  $scope.onDrop = function(event) {
    var dropzoneElement = angular.element(event.target);
    var item = event.dataTransfer.getData('text/plain');
    
    // 在拖放结束时移除副本元素和拖动效果
    var dragElement = angular.element(document.getElementById('drag-effect'));
    dragElement.empty();
    angular.element(document.body).find('.drag-clone').remove();
    
    // 在目标区域中处理拖放的逻辑
    // ...
  };
});