2016-09-01 5 views
0

Мое перетаскивание не работает. Может ли кто-нибудь сказать мне, что в этом плохого?перетаскивание углового без jQuery

HTML ссылка:

<head> 
    <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"> 
    </script> 
    <script src="components/angular-dragdrop/src/angular-dragdrop.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
</head> 
<body ng-app="myModule" ng-controller="myController"> 
    <div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{animate:true}" ng-hide="!list1.title">{{list1.title}} 
    </div> 

    <div class="thumbnail" data-drop="true" data-jqyoui-options ng-model="list2" jqyoui-droppable style='height:100px; margin-top:40px;border-color:green;'> 
     <div class="btn btn-success" data-drag="false" data-jqyoui-options ng-model="list2" jqyoui-draggable ng-hide="!list2.title">{{list2.title}} 
     </div> 
    </div> 
</body> 

Угловой код:

var myApp = angular.module("myModule",[]); 

myApp.controller("myController", function($scope){ 
    $scope.list1 = {title: 'AngularJS - Drag Me'}; 
    $scope.list2 = {};  
}); 

ответ

1

Регистрация модуль углового сопротивления и падение в вашем приложении:

var myApp = angular.module("myModule", ['ang-drag-drop']); 

myApp.controller("myController", function($scope){ 
    $scope.list1 = {title: 'AngularJS - Drag Me'}; 
    $scope.list2 = {}; 

}); 
+0

не работает –

+0

Дайте нам больше информации о том, что не работает? Вы проверили журналы консоли? Вы получаете ошибки? –

+0

кнопка, которую я создал, не перетаскивается нигде –

0

я наткнулся на три шоу -stoppers, когда я пытался сделать эту работу:

  1. Прежде всего убедитесь, что путь к компоненту действительно существует. На моей машине, по крайней мере, Бауэр устанавливается до ./bower_components/, а не ./components/.
  2. Simo Endre Правильно, что компонент необходимо зарегистрировать, но его необходимо зарегистрировать как ngDragDrop, а не ang-drag-drop.
  3. Наконец, компонент в вопросе (codef0rmer/angular-dragdrop) опирается на JQuery и JQuery-UI, чтобы сделать свою магию, так что вам нужно, чтобы добавить их в свой проект:

    <head> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
        ... 
    </head> 
    

Не уверен, что если этот последний для вас является нарушителем сделки, учитывая название вашего вопроса. ¯_ (ツ) _/¯

В любом случае, после внесения этих изменений код, похоже, работает по назначению.

Смежные вопросы