無法使用jQuery

-3

這裏是我的angularjs指令代碼無法使用jQuery

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>

我想要做的就是拖動圖像（jqueryui.com拖動元素/可拖動）使用角度js指令。但它不工作。這裏是一個jsfiddle

來源

2013-03-04 iJade

這是你在找什麼？ http://jqueryui.com/draggable/ 請更具體 – Ace 2013-03-04 11:15:35

抱歉，我已經更新dat.Ya這就是我想要通過angularjs完成 – iJade 2013-03-04 11:17:20

您可以輕鬆地添加一些摩擦 – Ace 2013-03-04 11:17:31

看一看

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用戶界面這可能是其中一個原因就是爲什麼你的代碼不能正常工作。在嘗試此操作之前，請包括Jquery，JQuery UI和Angular庫。

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

來源

2013-03-04 11:49:16 ganaraj

我更新了我的jsfiddle，但不工作。 http://jsfiddle.net/7fMCF/4/ – iJade 2013-03-04 12:28:45

@iBlue我已經用工作小提琴更新了答案（修改了你的！）。 – ganaraj 2013-03-04 12:38:07

@iBlue Dint瞭解你爲什麼試圖在keydown處理程序中使用它！ – ganaraj 2013-03-04 12:38:54

包括jQuery和jQuery UI的，並通過添加這個功能，你應該能夠拖動你的形象：如果你想要的形象只可拖動在特定區域

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

，檢查出來的API參考 - > http://api.jqueryui.com/draggable/

您可以使父（div？）元素的邊界框。

希望這就是你要找的。

來源

2013-03-04 11:28:17 Ace

以及我想要在angularjs應用程序的拖動功能 – iJade 2013-03-04 11:50:23

無法使用jQuery

回答

相關問題