angularjs draggable指令

 I技男 发布于 2023-02-12 18:14

我正在实现一个图像可拖动指令.我的代码位于http://plnkr.co/edit/MXnOu6HM1XmMEzot7dn3基本上它主要由基本可移动指令组成

appModule.directive('movable', function ($document) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function postLink(scope, element, attrs) {
                var startX = 0,
                    startY = 0,
                    x = 0,
                    y = 0;

                element.css({
                    position: 'absolute'
                });

                function bindElementMove() {
                    element.bind('mousedown', function (event) {
                        // Prevent default dragging of selected content
                        console.log("binding element to move.");
                        startX = event.screenX - x;
                        startY = event.screenY - y;
                        $document.bind('mousemove', moveDiv);
                        $document.bind('mouseup', mouseup);
                    });
                }

                bindElementMove();

                function moveDiv(event) {
                    console.log('im moving');
                    y = event.screenY - startY;
                    x = event.screenX - startX;
                    element.css({
                        top: y + 'px',
                        left: x + 'px'
                    });
                    scope.$apply(function () {
                        scope.tb.x = element.css("top");
                        scope.tb.y = element.css("left");
                    });
                }

                function mouseup() {
                    console.log("mouse up fired - unbind moveDiv and mouseUp");
                    $document.unbind('mousemove', moveDiv);
                    $document.unbind('mouseup', mouseup);
                }
            }
        }
    });

和图像指令

appModule.directive("imgelement", function ($document) {
    return {
        restrict: 'E',
        template: '
', require: 'ngModel', replace: true, link: function (scope, element, attrs) { hello = scope; } }; });

然而,正如在plunkr中所见,当我第一次点击图像并尝试拖动时,它会经历几次mousemove事件的传递,然后冻结,不再移动.随后释放我的鼠标移动图像,奇怪的是.知道我在这里做错了什么?

2 个回答
  • Angular.js文档中有一个draggable指令的工作示例http://docs.angularjs.org/guide/directive

    这是该指令中Plunker的一个分支:http://plnkr.co/edit/RmzmgubOfF1VdU7HaAtp?p = preview

    2023-02-12 18:16 回答
  • 我必须在这里回答我自己的问题.我应该使用event.preventDefaultmousemove功能,以防止使用默认的图像拖动浏览器,并在此拖放功能.

    2023-02-12 18:16 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有