2016-09-01 18 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

私は3つのショーに出くわしました私はこの仕事をしようとしたときにストップします:

  1. まず、コンポーネントへのパスが実際に存在することを確認します。少なくとも私のマシンでは、Bowerはではなく./bower_components/にインストールされています。
  2. Simo Endreは、コンポーネントを登録する必要がありますが、ang-drag-dropではなく、ngDragDropとして登録する必要があります。
  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> 
    

がわかりませんこの最後の1つは、あなたの質問のタイトルを与えられた、あなたのためのディール・ブレーカーです。とにかく、これらの変更を行った後、コードは意図したとおりに動作するように見えます。

関連する問題