Angularjs指令，使HTML元素可拖动，其中的HTML字段可选或可修改

AngularJS是一种流行的前端开发框架，它提供了一种使用HTML作为模板语言的方式，可以更加简洁地构建动态Web应用程序。AngularJS指令是其核心特性之一，允许开发者扩展HTML元素并为其添加自定义行为。

对于使HTML元素可拖动的需求，可以使用AngularJS的指令来实现。下面是一个示例指令的实现方式：

angular.module('app', [])
  .directive('draggable', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        // 使用HTML5的drag API实现拖拽功能
        element[0].draggable = true;
        
        // 定义拖拽开始时的回调函数
        element.on('dragstart', function(event) {
          event.dataTransfer.setData('text', attrs.field);
        });
        
        // 定义拖拽结束时的回调函数
        element.on('dragend', function(event) {
          // 执行相关操作
        });
      }
    };
  });

在上述代码中，我们定义了一个名为draggable的指令，它可以通过restrict: 'A'来作为一个属性指令进行使用。当使用该指令的元素被拖拽时，会触发相关的事件回调函数。

在dragstart事件回调函数中，我们使用event.dataTransfer.setData方法来设置被拖拽元素的数据。可以使用attrs.field来获取HTML字段的值，以进行进一步的操作。在dragend事件回调函数中，我们可以执行一些拖拽结束后的相关操作。

关于AngularJS指令的更多细节和用法，请参考腾讯云的AngularJS指令介绍。

需要注意的是，目前AngularJS已经不再处于活跃维护状态，官方推荐使用其后续版本Angular。因此，对于拖拽功能的实现，建议使用Angular或其他现代化的前端框架，如React或Vue.js，它们都有丰富的拖拽组件和插件可供使用。