J.chong

安裝node.js,安裝gruntjs

npm install -g grunt-cli
npm install grunt --save-dev
grunt –version

1、轉到項目根文件夾下，安裝插件；

npm init

生成 package.json

{
  "name": "elmok",
  "version": "0.1.0",
  "devDependencies": {
        "grunt" : "~0.4.2",
           "grunt-contrib-concat" : "~0.3.0",
        "grunt-contrib-uglify" : "~0.3.2"
  }
}

安裝

npm install
或
npm install grunt-contrib-concat --save-dev  //按具體插件名

2、創建任務
創建Gruntfile.js

pkg: grunt.file.readJSON('package.json')引入

elmok:項目

concat:任務名；files:{新生成文件:[被合併各文件]}

concat:任務名；files:{新生成文件:[被壓縮文件]}

src:[ ] 源文件路徑

dest:[ ] 生成目標文件

banner參數，給目標文件頭部加注釋信息

<%= pkg.name %>,pkg是用grunt.file.readJSON('package.json')读取到的JSON，而且已经转换为JS对象。依照前面package.json的演示样例，这段代码会在写入文件时被替换为"my-project-name"。

JS对象和JSON来做辅助的配置 <%= grunt.template.today("yyyy-mm-dd") %> 按指定格式生成任務時間

grunt.loadNpmTasks('grunt-contrib-concat');加載任務所需插件

grunt.registerTask('default', ['concat', 'uglify']);註冊任務，任務名以數組存

module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            elmok: {
                files: {
                    'dist/m.js': ['1.js', '2.js', '3.js', '4.js']
                }
            }
        },
        uglify: {
            elmok: {
                files: {
                    'dist/main.min.js': ['dist/main.js']
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask('default', ['concat', 'uglify']);
};

或等等類似

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'main.js',
                dest: 'main.min.js'
            }
        }
    });

    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // Default task(s).
    grunt.registerTask('default', ['uglify']);

};

最後執行：

grunt

小拓展：可任意選擇配置; 轉

options: {
    mangle: false, //不混淆变量名
    preserveComments: 'all', //不删除注释，还可以为 false（删除全部注释），some（保留@preserve @license @cc_on等注释）
    footer:'\n/*! <%= pkg.name %> 最后修改于： <%= grunt.template.today("yyyy-mm-dd") %> */'//添加footer
    report: "min"//输出压缩率，可选的值有 false(不输出信息)，gzip

},
buildall: {//任务三：按原文件结构压缩js文件夹内所有JS文件
    files: [{
        expand:true,
        cwd:'js',//js目录下
        src:'**/*.js',//所有js文件
        dest: 'output/js'//输出到此目录下
    }]
},
release: {//任务四：合并压缩a.js和b.js
    files: {
        'output/js/index.min.js': ['js/a.js', 'js/main/b.js']
    }
}

1、佈局轉換；

2、設置每一張都比上一次層級高；

3、move時找最近的，把當前拖動元素傳進來 ，最終得到變量nL

4、每一個圖片都沒碰到的情況；

5、需要找最近元素

6、拖動元素傳進函數

7、碰到的3元素找最近的；

8、條件是碰到的並且不包括自身

9、如何找斜邊的最小值；勾股定理

10、使用勾股定理則又是一個方法

11、被拖動元素與找到的最近元素之間運動切換，並且索引切換

12、隨時排使用隨時函數生產；並且也要重置每個圖的索引

window.onload = function () {
//佈局轉換；
var _ul = document.getElementById('ul1')
var _li = _ul.getElementsByTagName('li')
var _inp = document.getElementById('input1')
var izindex = 2;
var arr = []
for (var i = 0; i < _li.length; i++) {
    arr.push([_li[i].offsetLeft, _li[i].offsetTop])
}
for (var i = 0; i < _li.length; i++) {
    _li[i].style.position = 'absolute'
    _li[i].style.left = arr[i][0] + 'px'
    _li[i].style.top = arr[i][1] + 'px'
    _li[i].style.margin = 0;
}
for (var i = 0; i < _li.length; i++) {
    _li[i].index = i;
    drag(_li[i])
}
_inp.onclick = function () { //每一個都要動；
    var randomArr = [0, 1, 2, 3, 4, 5, 6, 7, 8]
    randomArr.sort(function (a, b) {  //隨機排
        return Math.random() - 0.5;
    })
    for (var i = 0; i < _li.length; i++) {
        sMove2(_li[i], {left: arr[randomArr[i]][0], top: arr[randomArr[i]][1]})
        //修正拖動時索引；
        _li[i].index = randomArr[i];
    }
}
function drag(obj) {
    var disX = 0;
    var disY = 0;
    obj.onmousedown = function (ev) {
        obj.style.zIndex = izindex++; //每一張都比上一次層級高；
        var ev = ev || event;
        disX = ev.clientX - obj.offsetLeft;
        disY = ev.clientY - obj.offsetTop;
        document.onmousemove = function (ev) {
            var ev = ev || event;
            obj.style.left = ev.clientX - disX + 'px'
            obj.style.top = ev.clientY - disY + 'px'

            for (var i = 0; i < _li.length; i++) {
                _li[i].style.border = ''
            }
            var nL = nearLi(obj) //1、move時找最近的，把當前拖動元素傳進來 ，最終得到變量nL
            if (nL) {     //2、每一個圖片都沒碰到的情況；
                nL.style.border = '2px red solid'
            }

        }
        document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null;
            //最近元素
            var nL = nearLi(obj) //拖動元素

            if (nL) {
                sMove2(nL, {left: arr[obj.index][0], top: arr[obj.index][1]})
                sMove2(obj, {left: arr[nL.index][0], top: arr[nL.index][1]})
                //索引對調
                nL.index = [nL.index, obj.index];
                obj.index = nL.index[0];
                nL.index = nL.index[1];

                nL.style.border = '';
            }
            else { //沒碰到時回到原始位置；
                sMove2(obj, {left: arr[obj.index][0], top: arr[obj.index][1]})
            }
        }
        return false;
    }
}

function pz(o1, o2) {
    var L1 = o1.offsetLeft;
    var R1 = o1.offsetLeft + o1.offsetWidth;
    var T1 = o1.offsetTop;
    var B1 = o1.offsetTop + o1.offsetHeight;

    var L2 = o2.offsetLeft;
    var R2 = o2.offsetLeft + o2.offsetWidth;
    var T2 = o2.offsetTop;
    var B2 = o2.offsetTop + o2.offsetHeight;

    if (R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2) { //碰不到的四種情況
        return false;
    }
    else {
        return true;
    }
}

function nearLi(o) { //3、拖動元素傳進來；
    var v = 9999;
    var index = -1;
    for (var i = 0; i < _li.length; i++) {    //4、碰到的3元素找最近的；
        if (pz(o, _li[i]) && o != _li[i]) {    // 5碰到的並且不包括自身

            //6、_li[i]即為碰到的3個元素，這裏的jl調用3次，需要利用勾股定理；
            var c = jl(o, _li[i])     //8、3條斜邊得到了 ；
            if (c < v) {    //9、如何找斜邊的最小值；
                v = c;      //10、v = 最小值；
                index = i;  //11、位置，最近的li在整體的位置
            }
        }
    }
    if (index != -1) {
        return _li[index];   //12、return回找到的元素，給上面代碼加紅邊框；
    }
    else {
        return false;
    }
}

function jl(o1, o2) {  //7、兩元素求元素的斜邊 a邊與b邊；    o1為第一張圖，o2可能是其他3張圖 ，因為上面調用了3次；
    var a = o1.offsetLeft - o2.offsetLeft;
    var b = o1.offsetTop - o2.offsetTop;
    return Math.sqrt(a * a + b * b);
}


function sMove2(obj, json, fn) {
    clearInterval(obj._t)
    var iCur = 0;
    var _speed = 0;
    obj._t = setInterval(function () {
        var on = true;
        for (var attr in json) {
            var _target = json[attr]
            if (attr == 'opacity') {
                iCur = Math.round(css(obj, attr) * 100)
            }
            else {
                iCur = parseInt(css(obj, attr));
            }
            _speed = (_target - iCur) / 8;
            _speed = _speed > 0 ? Math.ceil(_speed) : Math.floor(_speed)
            if (iCur !== _target) {
                on = false
                if (attr == 'opacity') {
                    obj.style.opacity = (iCur + _speed) / 100
                    obj.style.filter = 'alpha(opacity=' + iCur + _speed + ')'
                }
                else {
                    obj.style[attr] = iCur + _speed + 'px'
                }
            }
        }
        if (on) {
            clearInterval(obj._t)
            fn && fn.call(obj)
        }
    }, 30)
}

function css(obj, attr) {
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj) [attr]
}
}

See the Pen YympxY by elmok (@elmok) on CodePen.