-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>

私がやろうとしているのは、Angular 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>

あなたのフィドルを見ると、コードが機能しない理由の 1 つである 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 に答える