原創jquery拖拽排序圖片上傳插件實現(下)

接著上一部，這個部分主要是用js如何具體實現功能，好了廢話不多說，直接上代碼

function TaoUpload(obj){
    /**
     * 配置額外參數 skin
     */
    var uSkin=obj["skin"]?obj["skin"]:"#ccc";
    var _this =this;
    this.pDiv =$("#"+obj['uId']);//自定義id
    this.uplaodHeader(obj['uId']);//固定節點
    this.uplaodModal(obj['uId']); //添加彈出層
    this.uplaodEditModal(obj['uId']);//修改彈出層
    var DragEl =null; //存儲li對象
    this.uploadSkins(obj["uId"],uSkin); //皮膚擴展方法

    /**
     * 添加彈層變量
     * @type {*}
     */
    var newLi = $("#"+obj['uId']+'_img_uplaod_id');
    var addModal =$("#"+obj['uId']+'_boxTanceng'); //添加的彈層
    var uploadfileadd =$("#"+obj['uId']+'_file_upladd_input_hides');//上傳隱藏file（添加）
    var uploadImagesSrc =$("#"+obj['uId']+'_tupian_upload_src_images');//上傳img（添加）
    var uploadSure =$("#"+obj['uId']+'_queding_upload_btn_Save');//確定上傳 （添加）
    var uploadHref =$("#"+obj['uId']+'_input_upload_hrefs');//彈層連接（添加）
    var uploadClose =$("#"+obj['uId']+'_quxiao_upload_btn_noSave');///取消按鈕（添加）
    var uploadAddUL = $("#"+obj['uId']+'_ul_Upload_nav'); //li父級ul
    /**
     * 編輯彈層變量
     */
    var editModal =$("#"+obj['uId']+'_boxTanceng_bian'); //編輯彈層
    var editfileadd =$("#"+obj['uId']+'_file_upladd_input_hides_bian');//上傳隱藏file（編輯）
    var EditImagesSrc =$("#"+obj['uId']+'_tupian_upload_src_images_bian');//上傳img（編輯）
    var EditSure =$("#"+obj['uId']+'_queding_upload_btn_Save_bian');//確定上傳 （編輯）
    var editHref =$("#"+obj['uId']+'_input_upload_hrefs_bian');//彈層連接（編輯）
    var editClose =$("#"+obj['uId']+'_quxiao_upload_btn_noSave_bian');///取消按鈕（編輯）

   /* //事件區域
    $("#"+obj['uId']+'_a_Upload_btn_add').on("click",function(){
        alert(0);
    });*/
    //彈層
    newLi.on("click",function(){
        $(".boxTanceng").hide();
        uploadImagesSrc.attr("src","image/uploadsPic.png");
        uploadHref.val("");
        addModal.fadeIn();
    });
    //選擇圖片上傳(添加)
    uploadfileadd.on("change",function(){
        var absoulteUrl =$(this).val(); //獲取絕對路徑
        var sImg =_this.getObjectURL(this.files[0]);
        uploadImagesSrc.attr("src",sImg);
        addModal.attr("data-absoulte",absoulteUrl);
    });
    //點擊添加上傳
    var num_upload =-1;
    uploadSure.on("click",function(){
        //驗證判斷
        if(!_this.checkForm(uploadHref)){
            return;
        }
        num_upload++
        if(uploadAddUL.find(".li_for_Five").length>=4) {
            newLi.parent().hide();
        }
        uploadAddUL.find(".Upload_nav_li_class")
            .before("<li data-src='" + addModal.attr('data-absoulte') + "'" +
                " data-href='" + uploadHref.val() + "' " +
                "style='background:url(" + uploadImagesSrc.attr('src') + "); background-size: cover'" +
                " class='li_for_Five' data-index='" + num_upload + "' draggable='true'>" +
                "<div class='zhezhao_upload_div'>刪除</div></li>");

        //拖拽代碼實現 =>所有li綁定拖拽事件
        var cols =uploadAddUL.find(".li_for_Five");
        [].forEach.call(cols,function(item){
            item.addEventListener("dragstart",dragStartUpload,false);
            item.addEventListener("dragenter",dragEnterUpload,false);
            item.addEventListener("dragleave",dragLeaveUpload,false);
            item.addEventListener("dragover",dragMove,false);
            item.addEventListener("drop",dropDrag,false);
            item.addEventListener("dragend",DragEnd,false);
        });
        addModal.fadeOut();

    });
    //點擊取消彈窗消失（添加）
    uploadClose.on("click",function(){
        addModal.fadeOut();
    });
    //尋找創建的節點
    this.pDiv.on("click",function(ev){
        var target =$(ev.target);
        if(target.closest("li.li_for_Five").length==1){
            editModal.fadeIn();
            editModal.attr("data-index",target.attr("data-index"));
            editModal.attr("data-absoulte",target.attr("data-src"));
            var editSrc =target.css("backgroundImage").split('"')[1];
            EditImagesSrc.attr("src",editSrc);
            editHref.val(target.attr("data-href"));
        }
        if(target.closest("div.zhezhao_upload_div").length==1){
            editModal.hide();
            if(confirm("您確定刪除嗎")){
                target.parent().remove();
                newLi.parent().fadeIn();
            }
        }
    });
    //編輯框內選擇圖片
    editfileadd.on("change",function(){
        var absoulteUrl =$(this).val(); //獲取絕對路徑
        var sImg =_this.getObjectURL(this.files[0]);
        EditImagesSrc.attr("src",sImg);
        editModal.attr("data-absoulte",absoulteUrl);
    });
    //編輯確定，改變當前li圖片
    EditSure.on("click",function(){
        if(!_this.checkForm(editHref)){
            return;
        }
        var index  =editModal.attr("data-index");
        var dataSrc  =editModal.attr("data-absoulte");
        var srcEdit = EditImagesSrc.attr("src")
        uploadAddUL.find(".li_for_Five[data-index="+index+"]").css("backgroundImage","url("+srcEdit+")");
        uploadAddUL.find(".li_for_Five[data-index="+index+"]").attr("data-href",editHref.val());
        uploadAddUL.find(".li_for_Five[data-index="+index+"]").attr("data-src",dataSrc);
        editModal.fadeOut();
    });
    //編輯區域取消
    editClose.on("click",function(){
        editModal.fadeOut();
    });

    //開始拖拽
    function dragStartUpload(e){
      e.target.style.opacity='0.5';
      DragEl =this;
      //數據數組 => 數據傳遞
      var arr =[$(this).attr("data-src"),$(this).attr("data-index"),$(this).attr("data-href"),
          this.style.backgroundImage];
      e.dataTransfer.setData("text/html",arr);
    }
    //拖拽進入事件函數
    function dragEnterUpload(e){
        e.target.style.opacity='0.5';
    }
    //拖拽離開
    function dragLeaveUpload(e){
        e.target.style.opacity='1';
    }
    //拖拽移動
    function dragMove(e){
        e.preventDefault();
        return false;
    }
    //拖拽進入區域
    function dropDrag(e){
        if(DragEl!=this){
            DragEl.style.backgroundImage=this.style.backgroundImage;
            $(DragEl).attr("data-index",$(this).attr("data-index"));
            $(DragEl).attr("data-src",$(this).attr("data-src"));
            $(DragEl).attr("data-href",$(this).attr("data-href"));
            //數據接收，僅接收字符串
            var httml =e.dataTransfer.getData("text/html");
            //背景圖調換
            this.style.backgroundImage=httml.split(",")[3];
            //索引值調換
            $(this).attr("data-index",httml.split(",")[1]);
            //自定義src調換
            $(this).attr("data-src",httml.split(",")[0]);
            //自定義href調換
            $(this).attr("data-href",httml.split(",")[2])

        }
        return false;
    }
    //拖拽結束
    function DragEnd(){
        var cols =uploadAddUL.find(".li_for_Five");
        [].forEach.call(cols,function(item){
            item.style.opacity='1';
        });
    }

}
TaoUpload.prototype.uplaodHeader=function(id){
    this.pDiv.append('<ul class="ul_Upload_nav" id='+id+'_ul_Upload_nav>'+
        '<li class="Upload_nav_li_class">'+
        '![](image/jia.png)'+
        ' </li>'+
        ' </ul>'
       );
  /*  '<a href="javascript:;" class="a_Upload_btn_add" id='+id+'_a_Upload_btn_add >'+'保存'+
    '</a>'*/
}
/**
 * 添加彈出層
 * @param id
 */
TaoUpload.prototype.uplaodModal=function(id){

    $("body").append('<div class="boxTanceng" data-absoulte="" id='+id+'_boxTanceng>'+
        '<div class="boxTanceng_title" >'+
        '添加圖片上傳'+
        '</div>'+
        '<div class="boxTanceng_body">'+
        '<ul>'+
        '<span class="tupian_upload_src">圖片：</span>'+
        '<li style="margin-bottom: 10px; position: relative;">'+
        ' ![](image/uploadsPic.png)'+
        ' <input type="file" class="file_upladd_input_hides" accept="image/gif,image/jpeg,image/png" id='+id+'_file_upladd_input_hides />'+
        '</li>'+
        '<div style="clear: both"></div>'+
        '<span class="tupian_upload_href">圖片地址：</span>'+
        ' <li >'+
        ' <input type="text" class="input_upload_hrefs" id='+id+'_input_upload_hrefs />'+
        ' </li>'+
        '</ul>'+
        '</div>'+
        '<div class="boxTanceng_footer">'+
        '<a href="javascript:;" id='+id+'_quxiao_upload_btn_noSave'+' class="upload_btn quxiao_upload_btn_noSave">取消'+'</a>'+
        '<a href="javascript:;" class="upload_btn " id='+id+'_queding_upload_btn_Save'+'>添加</a>'+
        '</div>'+
        '</div>');

}
/**
 * 修改彈出層
 * @param id
 */
TaoUpload.prototype.uplaodEditModal=function(id){

    $("body").append('<div class="boxTanceng" data-index="" data-absoulte="" id='+id+'_boxTanceng_bian>'+
        '<div class="boxTanceng_title" >'+
        '編輯圖片上傳'+
        '</div>'+
        '<div class="boxTanceng_body">'+
        '<ul>'+
        '<span class="tupian_upload_src">圖片：</span>'+
        '<li style="margin-bottom: 10px; position: relative;">'+
        ' ![](image/uploadsPic.png)'+
        ' <input type="file" class="file_upladd_input_hides" accept="image/gif,image/jpeg,image/png" id='+id+'_file_upladd_input_hides_bian />'+
        '</li>'+
        '<div style="clear: both"></div>'+
        '<span class="tupian_upload_href">圖片地址：</span>'+
        ' <li >'+
        ' <input type="text" class="input_upload_hrefs" id='+id+'_input_upload_hrefs_bian />'+
        ' </li>'+
        '</ul>'+
        '</div>'+
        '<div class="boxTanceng_footer">'+
        '<a href="javascript:;" id='+id+'_quxiao_upload_btn_noSave_bian'+' class="upload_btn quxiao_upload_btn_noSave">取消'+'</a>'+
        '<a href="javascript:;" class="upload_btn " id='+id+'_queding_upload_btn_Save_bian'+'>編輯</a>'+
        '</div>'+
        '</div>');

}
TaoUpload.prototype.getObjectURL=function(file) {
    var url = null ;
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}
TaoUpload.prototype.checkForm=function(id){
    if(!id.val()){
        alert("請填寫鏈接！");
        return false;
    }
    return true;
}
TaoUpload.prototype.uploadSkins=function(id,skin){
    //添加彈窗
     var TTbox = $("#"+id+"_boxTanceng");
     TTbox.css("borderColor",skin)
     TTbox.find(".boxTanceng_title").css({
         backgroundColor:skin
     });
     $("#"+id+"_input_upload_hrefs").css("borderColor",skin);
     $("#"+id+"_queding_upload_btn_Save").css("backgroundColor",skin);
     //編輯彈窗
    var TTbox_bian = $("#"+id+"_boxTanceng_bian");
    TTbox_bian.css("borderColor",skin)
    TTbox_bian.find(".boxTanceng_title").css({
        backgroundColor:skin
    });
    $("#"+id+"_input_upload_hrefs_bian").css("borderColor",skin);
    $("#"+id+"_queding_upload_btn_Save_bian").css("backgroundColor",skin);

}
//插件入口函數
function TaoTaoUpload(json){
    new TaoUpload(json);
}

總結

代碼在很多地方有些問題，比如，工程中插件帶的圖片是否可以配置，和圖片的路徑是否需要配置。插件內部，其實通過簡單的三目運算符來判斷是否有值的，應該借用一下jquery的extend方法。不過整體還是很好。可以定制符合工程的ui風格，可以為后臺提供一個json數據，（上文中提煉了這個方法）

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,559評論 25贊 708
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具（例如配置管理，服務發現，斷路器，智...
    卡卡羅2017閱讀 134,993評論 19贊 139
  • 第1章 jQuery實現Ajax應用 1-1 使用load()方法異步請求數據 使用load()方法通過Ajax請...
    mo默22閱讀 1,742評論 1贊 9
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    前端進階之旅閱讀 114,841評論 24贊 450
  • 你青春時經意或不經意的 一眸 成了我一生枕著入睡的 照片
    國勝閱讀 202評論 1贊 0