1

我在 AngularJS 应用程序中实现一个简单的 jQuery droppable 时遇到了问题。

出于某种原因，代码正在我在 Fiddle 上设置的独立页面上运行：http: //jsfiddle.net/65FMq/3/

但是，由于某种原因，当我在 myApp 中添加相同的代码时，它不起作用。基本上，一旦您启动应用程序 (index.html)，您就会进入主页，其中包括 app.js、其他控制器、css 等。

然后，一旦您单击菜单项照片，我就会显示“照片”状态（这是一个单独的 html 文件）。然后，用户可以从那里选择他/她想要购买的一张照片，当他点击购买按钮时，使用 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;
                        });
                    }]
            }                       
        })  

}]);

这是我的照片Ctrl：

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);
    }
});
});

照片部分 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>
4

0 回答 0