function initDragHtml() {

    var img_htmls='<div class="item_content" id="imageChange"><ul>';
    $("#main_image .clear_both").remove();
    $("#main_image #over").remove();
    $("#main_image #imageChange").remove();
    var dic = new Array();
    $("#main_image").children().each(function () {
        var inHtml = $(this).html();
        var index = $(this).attr("index");
        dic[index] = inHtml;
    });
    dic = dic.filter(d=>d);
   
    if(dic.length === 0) {
        $("#main_image").children().each(function () {
            var inHtml = $(this).html();
            if ($(this).html().indexOf('<ul><li>') >= 0) {
                var img_html = '<li><div class="item">';
                img_html += inHtml;
                img_html += '</div></li>';
                img_htmls += img_html;
            } else {
                var img_html = '<li><div class="item"><ul><li>';
                img_html += inHtml;
                img_html += '</li></ul></div></li>';
                img_htmls += img_html;
            }
        });
    }
    else
    {
        var sortRes = Object.keys(dic).sort(function(a,b){ return a - b; });
        for (var key in sortRes) {
            if(dic[sortRes[key]].indexOf('<ul><li>') >= 0) {
                var img_html = '<li><div class="item" index=' + key + '>';
                img_html += dic[sortRes[key]];
                img_html += '</div></li>';
                img_htmls += img_html;
            }
            else {
                var img_html = '<li><div class="item" index=' + key + '><ul><li>';
                img_html += dic[sortRes[key]];
                img_html += '</li></ul></div></li>';
                img_htmls += img_html;
            }
     
        }
    }
   
    img_htmls +='</ul></div>';
    $("#main_image").html(img_htmls);

    initDragImg();
    
    $("#main_image").children().each(function(){
        //debugger;
        $(this).html;
    })

    img_htmls = '<div class="over" id="over" style="display: none;">' +
                '<p style="width:100%;height:100%;background-color: #000000;opacity:0.5;z-index:3333;"></p>' +
                '<input type="button" class="pre_page" style="position: absolute;top:50%;left:2%;z-index:5555;font-size: 20px;width: 100px;height: 50px;background-color: #FFFFFFF;border-radius: 5%; margin-right: 50px;" value="上一张"/>' +
                '<img src="" style="width:600px;position: absolute;top:10%;left:20%;z-index:5555;" id="over_img"/>' +
                '<input type="hidden"  id="over_img_index" value="0"/>' +
                '<input type="button" class="past_page"  style="position: absolute;top:50%;right:2%;z-index:5555;font-size: 20px;width: 100px;height: 50px;background-color: #FFFFFFF;border-radius: 5%; " value="下一张"/>' +
                '</div>';
    $("#main_image").append(img_htmls);
    img_htmls = '<div class="clear_both" style="clear: both;">' +
                '</div>';
    $("#main_image").append(img_htmls);
}

function initDragImg(){
    
    $("#main_image .item").each(function(i) {
        this.init = function() { // 初始化  this为item
            this.box = $(this).parent();//li

            for (var j = 0; j < 200; j++) {
                var imgIdStr = 'id="img' + j + '"';

                if($(this).html().indexOf(imgIdStr) >= 0) {
                    $(this).attr("id", 'image' + j);
                    if($(this).attr("index") === undefined) {
                        $(this).attr("index", j);
                    }
                    $(this).css({
                        position : "absolute",
                        left : this.box.offset().left,
                        //top:80
                        top : this.box.offset().top
                    }).appendTo("#main_image");
                }
            }
            
            this.drag();
        },
        this.move = function(callback) { // 移动
            $(this).stop(true).animate({
                left : this.box.offset().left,
                top : this.box.offset().top
            }, 500, function() {
                if(callback) {
                    callback.call(this);
                }
            });
        },
        this.collisionCheck = function() {
            var currentItem = this;
            var direction = null;
            $(this).siblings(".item").each(function() {
                if (currentItem.pointer.x > this.box.offset().left &&
                    currentItem.pointer.y > this.box.offset().top - $(document).scrollTop() &&
                    (currentItem.pointer.x < this.box.offset().left + this.box.width()) &&
                    (currentItem.pointer.y < this.box.offset().top - $(document).scrollTop() + this.box.height())) {
                    // 返回对象和方向
                    // if(currentItem.box.offset().top < this.box.offset().top) {
                    //     direction = "down";
                    // } else if(currentItem.box.offset().top > this.box.offset().top) {
                    //     direction = "up";
                    // } else {
                        direction = "normal";
                    //}
                    this.swap(currentItem, direction);
                }
            });
        },
        this.swap = function(currentItem, direction) { // 交换位置
            if(this.moveing) return false;
            var directions = {
                normal : function() {
                    var saveBox = this.box;
                    this.box = currentItem.box;
                    currentItem.box = saveBox;
                    this.move();
                    $(this).attr("index", this.box.index());
                    $(currentItem).attr("index", currentItem.box.index());
                },
                down : function() {
                    // 移到上方
                    var box = this.box;
                    var node = this;
                    var startIndex = currentItem.box.index();
                    var endIndex = node.box.index();
                    for(var i = endIndex; i > startIndex ; i--) {
                        var prevNode = $("#main_image .item[index="+ (i - 1) +"]")[0];
                        node.box = prevNode.box;
                        $(node).attr("index", node.box.index());
                        node.move();
                        node = prevNode;
                    }
                    currentItem.box = box;
                    $(currentItem).attr("index", box.index());
                },
                up : function() {
                    // 移到上方
                    var box = this.box;
                    var node = this;
                    var startIndex = node.box.index();
                    var endIndex = currentItem.box.index();
                    for(var i = startIndex; i < endIndex; i++) {
                        var nextNode = $("#main_image .item[index="+ (i + 1) +"]")[0];
                        node.box = nextNode.box;
                        $(node).attr("index", node.box.index());
                        node.move();
                        node = nextNode;
                    }
                    currentItem.box = box;
                    $(currentItem).attr("index", box.index());
                }
            }
            directions[direction].call(this);
        },
        this.drag = function() { // 拖拽
            var oldPosition = new Position();
            var oldPointer = new Pointer();
            var isDrag = false;
            var currentItem = null;
            $(this).mousedown(function(e) {
                e.preventDefault();
                oldPosition.left = $(this).position().left;
                oldPosition.top =  $(this).position().top;
                oldPointer.x = e.clientX;
                oldPointer.y = e.clientY;
                isDrag = true;

                currentItem = this;
            });
            $(document).mousemove(function(e) {
                var currentPointer = new Pointer(e.clientX, e.clientY);
                if(!isDrag) return false;
                $(currentItem).css({
                    "opacity" : "0.8",
                    "z-index" : 999
                }) ;
                var left = currentPointer.x - oldPointer.x + oldPosition.left;
                var top = currentPointer.y - oldPointer.y + oldPosition.top;
                $(currentItem).css({
                    left : left,
                    top : top
                }) ;
                currentItem.pointer = currentPointer;
                // 开始交换位置
                currentItem.collisionCheck();
            }) ;
            $(document).mouseup(function() {
                if(!isDrag) return false ;
                isDrag = false ;
                currentItem.move(function() {
                    $(this).css({
                        "opacity" : "1",
                        "z-index" : 0
                    }) ;
                }) ;
            }) ;
        }
        this.init() ;
    }) ;
}
function Pointer(x, y) {
    this.x = x ;
    this.y = y ;
}
function Position(left, top) {
    this.left = left ;
    this.top = top ;
}