Question

这是我的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

Answer 1

看看

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/

Answer 2

包含jQuery和jQuery UI，通过添加此功能，您应该可以拖动图像：

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

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

你可以将parent（div？）元素作为边界框。

希望这就是你要找的东西。

无法使用jquery拖动元素

2 个答案: