0
回答
怎么在元素被拖拽时添加到指定位置后,$index顺序不变,数据更换后添加到指定位置?
利用AWS快速构建适用于生产的无服务器应用程序,免费试用12个月>>>   
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        li{list-style: none;border:1px solid red;padding:20px;margin:10px 0 20px;}
    </style>
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-controller="mycont">
<div>
    <ul>
        <li ng-repeat="item in leng" draggable="true">
            <p><em ng-bind="item.id"></em></p>
            <div>
                <h3 ng-bind="item.name"></h3>
                <p ng-bind="item.text"></p>
            </div>
        </li>
    </ul>
</div>
</body>

<script>
    var app = angular.module("myapp",[]);
    app.controller("mycont",function($scope){
        $scope.names = "john";
        $scope.leng = [{"id":0,"name":"test0","text":"0AngularJS 可以构建一个单一页面应用程序"},
                                    {"id":1,"name":"test1","text":"1AngularJS 可以构建一个单一页面应用程序"},
                                    {"id":2,"name":"test2","text":"2AngularJS 可以构建一个单一页面应用程序"},
                                    {"id":3,"name":"test3","text":"3AngularJS 可以构建一个单一页面应用程序"},
                                    {"id":4,"name":"test4","text":"4AngularJS 可以构建一个单一页面应用程序"},
                                    {"id":5,"name":"test5","text":"5AngularJS 可以构建一个单一页面应用程序"},
                                    {"id":6,"name":"test6","text":"6AngularJS 可以构建一个单一页面应用程序"}
                                    ]

    })
    //封装选择器
//    var $ = function(selector) {
//        if (!selector) { return []; }
//        var arrEle = [];
//        if (document.querySelectorAll) {
//            arrEle = document.querySelectorAll(selector);
//        } else {
//            var oAll = document.getElementsByTagName("div"), lAll = oAll.length;
//            if (lAll) {
//                var i = 0;
//                for (i; i<lAll; i+=1) {
//                    if (/^\./.test(selector)) {
//                        if (oAll[i].className === selector.replace(".", "")) {
//                            arrEle.push(oAll[i]);
//                        }
//                    } else if(/^#/.test(selector)) {
//                        if (oAll[i].id === selector.replace("#", "")) {
//                            arrEle.push(oAll[i]);
//                        }
//                    }
//                }
//            }
//        }
//        return arrEle;
//    };
//    var oul = $("ul")[0];
//    var oli = $("li");

setTimeout(function(){
    
    var oul = document.getElementsByTagName("ul")[0];
    var oli = oul.children;
    var state = null;
    var end = null;
    var index = null;
    console.log(oli[0]);
    for(var i=0;i<oli.length;i++){
        oli[i].index = i
        oli[i].onselectstart = function(){
            return false;
        }
        oli[i].ondragstart = function(ev){
            console.log(1);
            ev.dataTransfer.effectAllowed = "move";
            ev.dataTransfer.setData("text", ev.target.innerHTML);
            state = ev.target;
            index = this.index;
            return true;
        }
        oli[i].ondragend = function(ev){

            state = null;
            return false
        }
    }
    for(var i=0;i<oli.length;i++){
        if(i!=index){
            oli[i].ondragover = function(ev) {
                ev.preventDefault();
                return true;
            };

            oli[i].ondragenter = function(ev) {
                this.style.color = "blue";
                if(ev.target.nodeName == "LI"){
                    ev.dataTransfer.setData("text", ev.target.innerHTML);
                    end = ev.target;
                }
                return true;
            };
            oli[i].ondrop = function(ev){

                console.log(state);
                console.log(end);
                oul.insertBefore(state,end.nextSibling);
                return false;
            }

        }
    }

})

</script>
<无标签>
举报
CAI233
发帖于3个月前 0回/11阅
顶部