Angular 1与Angular 2中切换Div并启用拖拽事件的实现方案

Angular 2 实现方案 #

1. Div切换功能 #

你提到的切换示例核心是通过布尔变量控制DOM的显示状态和样式，我把核心代码整理并补充完整：

组件类代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-toggle',
  templateUrl: './toggle.component.html',
  styleUrls: ['./toggle.component.css']
})
export class ToggleComponent {
  showOnbutton = false;
  clickData = '点击切换';

  updateClick() {
    this.clickData = this.showOnbutton ? '已开启' : '点击切换';
    // 这里可以添加切换后的额外业务逻辑
  }
}

模板HTML代码

<div class="myContainer">
  <div class="tog-button" [ngClass]="{'Off': !showOnbutton, 'On': showOnbutton}">
    <div class="tog-button-off" (click)="showOnbutton = !showOnbutton; updateClick()"></div>
    <div class="tog-button-on" [ngClass]="{'On': showOnbutton, 'Off': !showOnbutton}" 
         (click)="showOnbutton = !showOnbutton; updateClick()">
      {{ clickData }}
    </div>
  </div>
</div>

样式示例（CSS）

.myContainer {
  padding: 20px;
}
.tog-button {
  display: flex;
  width: 120px;
  height: 40px;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.tog-button.Off {
  background-color: #ccc;
}
.tog-button.On {
  background-color: #4CAF50;
}
.tog-button-off, .tog-button-on {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  color: white;
  transition: opacity 0.3s;
}
.tog-button-on.Off {
  opacity: 0.5;
}
.tog-button-on.On {
  opacity: 1;
}

2. 拖拽事件实现 #

在Angular 2中可以通过两种方式实现拖拽：原生事件监听或使用Angular CDK的DragDrop模块（更便捷）：

方法一：原生事件监听

在组件类中添加监听逻辑：

import { Component, HostListener } from '@angular/core';

// 组件类其他代码...

@HostListener('dragstart', ['$event'])
onDragStart(event: DragEvent) {
  event.dataTransfer?.setData('text/plain', JSON.stringify({type: 'toggleDiv', state: this.showOnbutton}));
  (event.target as HTMLElement).style.opacity = '0.5';
}

@HostListener('dragend', ['$event'])
onDragEnd(event: DragEvent) {
  (event.target as HTMLElement).style.opacity = '1';
}

@HostListener('dragover', ['$event'])
onDragOver(event: DragEvent) {
  event.preventDefault(); // 必须阻止默认行为才能触发drop事件
}

@HostListener('drop', ['$event'])
onDrop(event: DragEvent) {
  event.preventDefault();
  const data = JSON.parse(event.dataTransfer?.getData('text/plain') || '{}');
  console.log('拖拽元素状态:', data.state);
  // 这里可以添加放置后的逻辑，比如更新位置或状态
}

然后在模板的容器Div上添加拖拽属性：

<div class="myContainer" draggable="true">
  <!-- 内部切换按钮代码 -->
</div>

方法二：使用Angular CDK DragDrop

1. 先安装依赖：

npm install @angular/cdk

2. 在模块中导入DragDropModule：

import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [
    // 其他模块
    DragDropModule
  ]
})
export class AppModule { }

3. 模板中使用拖拽指令：

<div cdkDrag class="myContainer">
  <div class="tog-button" [ngClass]="{'Off': !showOnbutton, 'On': showOnbutton}">
    <!-- 内部切换按钮代码 -->
  </div>
  <!-- 自定义拖拽占位符 -->
  <div *cdkDragPlaceholder class="myContainer-placeholder"></div>
</div>

这种方式自带拖拽动画、占位符等功能，适合快速实现复杂拖拽场景。

AngularJS（Angular 1）实现方案 #

1. Div切换功能 #

AngularJS通过ng-class和ng-click指令实现切换逻辑，核心代码如下：

控制器代码

angular.module('toggleApp', [])
  .controller('ToggleController', function($scope) {
    $scope.showOnbutton = false;
    $scope.clickData = '点击切换';

    $scope.updateClick = function() {
      $scope.clickData = $scope.showOnbutton ? '已开启' : '点击切换';
    };
  });

模板HTML代码

<div ng-app="toggleApp" ng-controller="ToggleController" class="myContainer">
  <div class="tog-button" ng-class="{'Off': !showOnbutton, 'On': showOnbutton}">
    <div class="tog-button-off" ng-click="showOnbutton = !showOnbutton; updateClick()"></div>
    <div class="tog-button-on" ng-class="{'On': showOnbutton, 'Off': !showOnbutton}" 
         ng-click="showOnbutton = !showOnbutton; updateClick()">
      {{ clickData }}
    </div>
  </div>
</div>

样式可以直接复用Angular 2部分的CSS代码。

2. 拖拽事件实现 #

AngularJS可以通过原生事件绑定或第三方库实现拖拽：

方法一：原生事件绑定

在模板中绑定拖拽相关事件：

<div class="myContainer" 
     draggable="true"
     ng-dragstart="onDragStart($event)"
     ng-dragend="onDragEnd($event)"
     ng-dragover="onDragOver($event)"
     ng-drop="onDrop($event)">
  <!-- 内部切换按钮代码 -->
</div>

控制器中添加事件处理函数：

$scope.onDragStart = function(event) {
  event.dataTransfer.setData('text/plain', JSON.stringify({state: $scope.showOnbutton}));
  event.target.style.opacity = '0.5';
};

$scope.onDragEnd = function(event) {
  event.target.style.opacity = '1';
};

$scope.onDragOver = function(event) {
  event.preventDefault();
};

$scope.onDrop = function(event) {
  event.preventDefault();
  const data = JSON.parse(event.dataTransfer.getData('text/plain'));
  console.log('拖拽元素状态:', data.state);
};

方法二：使用AngularUI Sortable（第三方库）

如果需要拖拽排序功能，可以使用AngularUI的Sortable模块：

1. 引入依赖脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.19.0/sortable.min.js"></script>

2. 模块中注入依赖：

angular.module('toggleApp', ['ui.sortable'])

3. 模板中使用指令：

<div ui-sortable class="myContainer">
  <!-- 内部切换按钮代码 -->
</div>

这种方式适合列表类的拖拽排序场景，无需手动处理复杂的拖拽逻辑。

内容的提问来源于stack exchange，提问作者startercoder