-3

这是我的 angularjs 指令代码

    angular.module('test', []).directive('hello', function() {
    return {
        restrict : 'E',
        template : '<div style="position: relative"><img id="mr" class="drag-image" src="http://www.vancouverconventioncentre.com/wp-content/themes/mobile_pack_base/img/about-us-icon.png" style="position: absolute;" /></div>',
        replace: true,
        link : function(scope, element, attrs) {
            jQuery("#mr").on("keydown", function (){
                 $("#mr").draggable();
            });
        }
    };
})

这是html代码

    <div ng-app="test">
<hello>
    <img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="position: absolute;" />
</hello>
</div>

我想要做的是使用角度 js 指令拖动图像（jqueryui.com/draggable）。但它不起作用。这是一个jsfiddle

4

2 回答 2

2

看一下

https://github.com/ganarajpr/Angular-UI-Components/blob/master/js/directives.js#L28

这本质上是

myApp.directive('drag',function() {
        return function(scope, elm, attrs) {
            elm.draggable({ containment: attrs.drag});
            elm.css({zIndex:2000});
        };
    });

现在您可以在任何元素上使用属性级别指令，它会变得可拖动。

例如 ：

<div drag="parent"></div>

看到您的小提琴，您似乎没有包含 JQuery UI，这可能是您的代码无法正常工作的原因之一。请在尝试之前包含 Jquery、JQuery UI 和 Angular 库。

http://jsfiddle.net/7fMCF/5/

于 2013-03-04T11:49:16.503 回答
0

包括 jQuery 和 jQuery UI，通过添加这个函数，你应该能够拖动你的图像：

$(function() {
    $( "#marker" ).draggable();
});

如果您希望图像只能在特定区域中拖动，请查看那里的 API 参考 -> http://api.jqueryui.com/draggable/

您可以使父 ( div ? ) 元素成为边界框。

希望这就是你要找的。

于 2013-03-04T11:28:17.557 回答