angular.js - angular sortable 可以拖动但停止时位置无法发生变化

Question

html代码如下： {代码...} js代码如下： {代码...} json数据如下： {代码...} 拖动后在deactivate之后，stop之前报错

大家讲道理 · Answer

1. ドラッグアンドドロッププラグインに関しては、次の理由から angular-sortable-view を使用することをお勧めします: (1) 使いやすく便利です (2) いいえAngular を除く追加の依存関係が必要です。 angular-sortable-view，原因：（1）使用简单方便（2）除了Angular不需要额外的依赖。
2.我这里写了一个小例子，你可以点击看看，如果是你想要的结果，可以看下面的内容，如果不满意，下面的就不需要看了。

代码部分：
1.index.html


    
        

            

                

                    
name: {{item.name}}
                    value: {{item.age}}
                
                拖拽手柄
            
        
        
        
            {{vm.items}}

2.app.js

(function(){
    angular.module('MyApp', ['angular-sortable-view'])
        .controller('MyController', MyController)
        .service('DataService', DataService);

    MyController.$inject = ['DataService', '$q', '$scope'];
    DataService.$inject = ['$http'];

    function MyController(DataService, $q, $scope){
        var vm = this;

        activate();
        function activate() {
            var promises = [get_data()];
            return $q.all(promises).then(function() {
                // promise被resolve时的处理
            });
        }

        function get_data(){
            // 我这里只是示范,真正的promise不是这样写的
            vm.items = DataService.get_data();
            console.log(vm.items);
        }

    }

    function DataService($http){
        // 为了简单起见,我没有真正的发送一个http请求,而是使用了假数据.

        /*var url = 'http://example.com';
        var params = {
            key: 'your_key'
        };

        var service = {
            get_data: get_data
        };

        return service;

        function get_data(){
            // 你使用$http获取数据
            return $http.get(url, params)
                .then(function(res){
                    // 你的处理
                });
        }*/


        // 上面是实际中会用到的,我下面使用了假数据

        var data = [
            {name: 'dreamapple1', age: 1},
            {name: 'dreamapple2', age: 2},
            {name: 'dreamapple3', age: 3},
            {name: 'dreamapple4', age: 4},
            {name: 'dreamapple5', age: 5},
            {name: 'dreamapple6', age: 6}
        ];

        var service = {
            get_data : get_data
        };

        return service;

        function get_data(){
            return data;
        }

    }

})();

3.style.css2. ここに小さな例を書きました。必要な結果であれば、以下の内容を読むことができます。満足できない場合は、以下の内容を読む必要はありません。

コード部分:

1.index.html

リーリー
2.app.js

リーリー 🎜3.style.css🎜 リーリー 🎜基本的には以上です。お役に立てれば幸いです^_^。 🎜 🎜 🎜1. 公式 Web サイトのサンプルポータル 🎜2. コードについて不明な点がある場合は、私のサンプルを確認してください。 🎜

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル