在angularjs中克隆HTML元素 [英] Clone html element in angularjs

问题描述

我正在尝试在angularjs中实现拖放系统.

I'm trying to implement drag and drop system in angularjs.

我希望在拖动开始时克隆被拖动的对象.但是我不知道如何在angularjs中克隆一个元素以及它的作用域和链接的控制器?

I want dragged object to be cloned on drag start. However I have no idea how to clone an element along with it's scope and linked controller in angularjs?

有什么建议吗?

推荐答案

克隆DOM元素，因为通常在拖动&不建议在Angular中使用drop.而是克隆您的对象模型.

Cloning DOM elements as it is usually done for drag & drop is not recommended with Angular. Instead, clone your object model.

假设您在<UL>中显示项目，并且只有在拖动时才显示另一个被拖动的项目:

Let's say you display items in an <UL> and have another dragged item visible only while dragging:

<ul>
    <li ng-repeat="item in items" class="{{item.shadow}}">{{item.text}}</li>
<ul>
<div ng-show="draggedItem != null">{{draggedItem.text}}</div>

并在控制器中复制该项目以将其拖到draggedItem中:

and in the controller, make a copy of the item to drag into draggedItem:

$scope.items = [{text:"First"}, {text:"Second"}];
$scope.shadowItem = null; // Item at the original position
$scope.draggedItem = null; // Clone item being moved

$scope.dragStart = function(item) {
    $scope.shadowItem = item;
    $scope.draggedItem = angular.copy(item);
    item.shadow = "shadow"; // set a CSS class to change its look
    // From now on, the DIV is dragged around
}

$scope.drop = function() {
    // Save the new item position
    $scope.draggedItem = null; // Makes the dragged clone item disappear
    $scope.shadowItem.shadow = ""; // give the item its normal look back
}

这篇关于在angularjs中克隆HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！