jquery - AngularJS - jQuery ドロップ可能

Question

AngularJS アプリでドロップ可能な単純な jQuery を実装する際に問題が発生しています。

何らかの理由で、コードは私が Fiddle に設定したスタンドアロン ページで動作しています: http://jsfiddle.net/65FMq/3/

ただし、何らかの理由で myApp に同じコードを追加すると機能しません。基本的に、アプリ (index.html) を起動するとすぐに、app.js、他のコントローラー、css などをすべて含むホームページが表示されます。

次に、メニュー項目の写真をクリックすると、「写真」の状態 (別の html ファイル) が表示されます。そこから、ユーザーは購入したい写真の 1 つを選択できます。購入ボタンをクリックすると、ng-click"buyPhoto(photos)" を使用して、利用可能な写真を示す div を非表示にし、その写真の詳細を含む div。

そこには、写真に関する情報とは別に、ユーザーが写真を注文できるすべての可能なサイズのグリッドも表示しています。ユーザーは、注文バー (ドロップ可能な領域) に希望のサイズをドラッグ アンド ドロップする必要があります。 ）。ただし、必要な jquery css/js ファイルが読み込まれ、写真のサムネイル (上記のフィドルのセル) がドラッグ可能に設定されていても、何らかの理由でドラッグ/ドロップ効果が得られません。

ここに私の app.js があります:

angular
.module('app', [
    'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'partials/home.html'
        })
        .state('photos', {
            url: '/photos',
            templateUrl: 'partials/photos.html',
            controller:  'photosCtrl',
            resolve: { photos: ['$http', function($http){
                        return $http.get('api/photos.json').then(function(response){
                            return response.data;
                        });
                    }]
            }                       
        })  

}]);

これが私のphotosCtrlです：

angular.module('app')
 .controller('photosCtrl', ['$scope', '$http', 'photos', function($scope, $http, photos) {

$scope.photos       = photos;

$scope.buyPhoto = function(photos) {                    
    document.getElementById('photos_available').style.display = 'none'; 
    document.getElementById('photo_buy').style.display = 'block';   

    $scope.photo_name   = photos.photo_name;
    $scope.image        = photos.image;
    $scope.description  = photos.description;
    $scope.date_taken   = photos.date_taken;
    $scope.price        = photos.price; 
    $scope.rows         = 3;
    $scope.cells        = 3;
    $scope.getNumber = function (num) {
           return new Array(num);
    }       


}])
.filter('character',function(){
return function(input){
    return String.fromCharCode(64 + parseInt(input,10));
};
});


$(document).ready(function () {
$("#cell-container ul.rows li.draggable").draggable({
    appendTo: "body",
    helper: "clone"
});
$("#droppable ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        $(this).find(".placeholder").remove();
        $("<li></li>").text(ui.draggable.text()).appendTo(this);
    }
});
});

Photos 部分的な html ファイルの HTML (スニペット) (必要なセルと行を生成し、行にドラッグ可能なクラスが与えられていることを示すために角度の繰り返しが発生している場所が含まれています):

    <div class="cell-selection-container" id="cell-container">
        <ul class="rows">
            <li class="row" ng-repeat="i in getNumber(rows) track by $index">
                <ul class="cells">
                    <li class="cell draggable" ng-repeat="i in getNumber(cells) track by $index" id="{{$index+1}}" id="{{$parent.$index+1|character}}{{$index+1}}">
                        <div class="cell-number">{{$parent.$index+1|character}}{{$index+1}}</div>
                    </li>
                    <div class="clear"></div>
                </ul>
            </li>
        </ul>
    </div>
<br>
<br>
<div id="droppable">
    <ol>
        <li class="placeholder">drop stuff here</li>
    </ol>
</div>