AngularJS ::使用自动选择选项拖放

时间:2015-05-25 13:45:12

标签: jquery angularjs drag-and-drop

我正在我的角度应用程序中实现类似gmail功能的电子邮件。

我需要在TO和CC字段之间拖放联系人,并且TO / CC字段还具有用于选择联系人的自动选择下拉选项。

我无法找到解决方案,所以任何人都可以建议我使用jquery / angular插件来获取此功能。

谢谢你的支持!

1 个答案:

答案 0 :(得分:0)

直接来自angularJs的开发人员指南将负责拖动部分

    angular.module('dragModule', [])
.directive('myDraggable', ['$document', function($document) {
  return {
    link: function(scope, element, attr) {
      var startX = 0, startY = 0, x = 0, y = 0;

      element.css({
       position: 'relative',
       border: '1px solid red',
       backgroundColor: 'lightgrey',
       cursor: 'pointer'
      });

      element.on('mousedown', function(event) {
        // Prevent default dragging of selected content
        event.preventDefault();
        startX = event.pageX - x;
        startY = event.pageY - y;
        $document.on('mousemove', mousemove);
        $document.on('mouseup', mouseup);
      });

      function mousemove(event) {
        y = event.pageY - startY;
        x = event.pageX - startX;
        element.css({
          top: y + 'px',
          left:  x + 'px'
        });
      }

      function mouseup() {
        $document.off('mousemove', mousemove);
        $document.off('mouseup', mouseup);
      }
    }
  };
}]);

我不知道你怎么知道mouseup()中的哪个文本字段,但mouseup()中的某些逻辑会设置范围值。