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

Question

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

大家讲道理 · Answer

1. Regarding the drag-and-drop plug-in, it is recommended to use it angular-sortable-view，原因：（1）使用简单方便（2）除了Angular No additional dependencies are required.
2. I have written a small example here. You can click to see it. If it is the result you want, you can read the content below. If you are not satisfied, there is no need to read the content below.

Code part:
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.css

*{
    padding: 0;
    margin: 0;
}
html{
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
}
.background{
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
}
.sv-container{
    margin: 0 auto;
    width: 30%;
    height: 600px;
    background-color: #b3d4fc;
    position: relative;
}

.sv-cell{
    width: 80%;
    margin: 10px auto;
    height: 90px;
    background-color: #0000FF;
    position: relative;
}
.sv-handle{
    cursor: pointer;
    position: absolute;
    left: -30px;
    width: 80px;
    height: 20px;
    line-height: 20px;
    border: 1px solid black;
    z-index: 0;
}
.show-data{
    width: 30%;
    margin: 0 auto;
    text-align: center;
    color: #000;
}

Okay, that’s basically it, I hope it can help you ^_^.

1. Official website example portal
2. If there is anything unclear about the code, you can check out my example.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial