[html5]表格拖動

表格拖動前：

表格拖動後：

實現代碼：

function dragFromLeft(){
  /**從左表拖動一條記錄到右表*/
  $(".group-wish-list-table, .js-table-container").droppable({
      drop: function(event, ui) 
          if (drapingId !== undefined && drapingId !== "" && drapingId !== null) {
              if (isAddrow) {
                  /** 增加一條記錄 */
                  var leftRowObj = $('#left' + drapingId);


                  if(leftRowObj.length>0){
                    var rightRowObj = $('#right' + drapingId);
                    if (rightRowObj.length > 0) {
                        console.log("exist");
                                 csp.notify('notice', {
                                     msg: '該股票已存在於心願清單，可進行數量更改或刪除操作',
                                     delay: 5000,
                                 });

                        return ;
                    } else {

                      var surBp =$(".js-surplusBp-value").text().split(':')[1];
                      $scope.surplusBP = $scope.unformat(surBp);
                      console.log($scope.surplusBP,surBp)

                        var calRlt = $scope.calCurMarketValue(drapingId, 100,$scope.surplusBP);
                        var cAmount = $scope.calCurUnitAmount(drapingId, 100);

                        if (calRlt) {
                            var stockNum = 0;
                            var rowObjs = $(leftRowObj).children();
                                    if(cAmount){
                                        stockNum = 100
                                    }else{
                                        stockNum = $(rowObjs[5]).html();
                                    }
                            var stockTotal = $(rowObjs[5]).html();
                            var stockNo = $(rowObjs[1]).html();
                            var stockName = $(rowObjs[2]).html();
                            var marketVal = $scope.formatNumber(100 * $scope.calStockUnitPrice(stockNo.split('.')[0]),2);
                            var idStr = "right" + drapingId;
                            var insertHtmlStr = '<tr class="js-right-row" id="' + idStr + '"><td>' + 0 + '</td><td>'
                                            + stockNo + '</td><td>' + stockName + '</td><td class="js-amount-right" style="padding-top:1px;padding-bottom:1px;">'
                                            + '<div class="ui icon input js-stock-num"><input type="text" value="'
                                            + stockNum + '" style="width:100px;" ><div class="js-num-change"><i class="caret up link icon"></i>'
                                            + '<i class="caret down link icon"></i></div> <div class="ui label" style="width:40%;color:rgba(39, 35, 35, 0.45);padding-top:14px;">'+stockTotal
                                            +' </div></div></td><td class="js-num-right">'
                                            + marketVal + '</td>'
                                            + '<td><i class="trash outline big link icon" data-content="移除"></i>'
                                            + '</td></tr>';
                            var tableConObjs = $(this).children();
                            var tableConObj = tableConObjs[0];
                            var tableObjs = $(tableConObj).children();
                            var tableObj = tableObjs[0];
                            var tbodyObj = tableObjs[1];
                            var bodyObjs = $(tableObj).next().children();
                            if (bodyObjs.length > 0) {
                                $(tbodyObj).append(insertHtmlStr);
                            } else {
                                $(tableObj).next().append(insertHtmlStr);
                            }
                            $scope.updateCurMaketValue();
                        } else {
                            // 彈出對話框提示超過了BP值
                            //$('.overBP.modal').modal('show');
                            csp.notify('notice', {
                                msg: '超出剩餘槓桿BP,無法添加進心願清單',
                                delay: 5000,
                            });
                        }
                    }
                  }
                }

              }
              $scope.tableOperator();
              $scope.dealRightTableNo();
          }
      })
}
/**
 * @func clearTable
 * @desc 清空表格
 * @author ll
 * @param {string} idStr 想要清空的表格id
 */
$scope.clearTable = function(idStr){
    try{
        var thistable = document.getElementById(idStr);
        var trs = thistable.getElementsByTagName("tr");
        for(var i = trs.length - 1; i > 0; i--) {
            thistable.deleteRow(i);
        }
    }catch(e){

    }


}

/**
 * @func dragLeftTable
 * @desc 左表拖動
 * @author ll
 */
 $scope.dragLeftTable = function(){
    //左邊表格拖拽操作
    $(".js-left-table").draggable({
        cursor: "move",
        cursorAt: { top: 0, left: 0},
        helper: "clone",
        start: function() {
            var rows = $(this).children();
            var stockNo = $(rows[1]).html();
            drapingId = stockNo.split('.')[0];
            isAddrow = true;
            console.log("is-------->isAddrow",isAddrow)
        }
    });
}

/**
 * @func refreshUnitStocks
 * @desc 刷新券表界面
 * @author ll
 */
 $scope.refreshUnitStocks = function(curTrid){
    var a = {trid:''};
    a.trid = curTrid;
    var windowHeight = $(window).height()*0.65;
    wishListService.getUnitStocks(a,function(data) {

            $scope.clearTable("left-table");
            $(".trade-unit-stock-table.container").css("height",windowHeight);
            if (data.length >= 0) {
                var insertHtmlStr = '';
                for (var i = 0; i < data.length; i++) {
                    var index = i+1
                    var stockNo = data[i].cid;
                    var stockName = data[i].cname;
                    var stockNum = $scope.formatNumber(data[i].totalsa);
                    var idStr = "left" + data[i].cid.split('.')[0];
                    var marketVal = $scope.formatNumber(data[i].preclose,2);
                    var surplusNum = $scope.formatNumber(data[i].totalsa-data[i].allocatedsa);
                    var surplusVal = $scope.formatNumber((data[i].totalsa-data[i].allocatedsa)*data[i].preclose,2);
                    if(idStr!=='left000000'){
                      //ui-widget-content
                      var tempInsertHtmlStr = '<tr class="js-left-table " id="'
                                            + idStr + '" style="height:50px;"><td>'+index+'</td><td>' + stockNo + '</td><td>'
                                            + stockName + '</td><td class="js-num-left">'
                                            + stockNum + '</td><td class="js-num-left">'
                                            + marketVal + '</td><td class="js-num-left">'
                                            + surplusNum + '</td><td class="js-num-left">'
                                            +surplusVal+'</td></tr>';
                      insertHtmlStr += tempInsertHtmlStr;
                    }
                    else{
                      var tempInsertHtmlStr = '<tr class="js-left-table "     style="height:50px;background-color:rgb(230, 32, 32);"><td>'+index+'</td><td>' + stockNo + '</td><td>'
                                            + stockName + '</td><td class="js-num-left">'
                                            + stockNum + '</td><td class="js-num-left">'
                                            + marketVal + '</td><td class="js-num-left">'
                                            + surplusNum + '</td><td class="js-num-left">'
                                            +surplusVal+'</td></tr>';
                      insertHtmlStr += tempInsertHtmlStr;

                      csp.notify('notice', {
                          msg: '總券表中存在行情不存在的股票，請到交易單元總券表末尾仔細覈對是否輸入錯誤',
                          delay: 15000,
                      });
                    }

                }
                if (insertHtmlStr.length > 0) {
                    //console.log("getUnitStocks insertHtmlStr--->", insertHtmlStr);
                    $(".js-left-tbody").append(insertHtmlStr);
                    //tableOperator();
                    /** 左邊表格拖拽操作 */
                    $scope.dragLeftTable()
                }
            }
        $(".groupWish-view").removeClass("active");
    });
}


/**
 * @func formatNumber
 * @desc 格式化數字
 * @param {number} num 需要被格式化的數字
 * @param {int} [precision] 格式化後的精度
 * @author lizhexi
 */
$scope.formatNumber = function(num, precision) {
    var parts;
    // 判斷是否爲數字
    if (!isNaN(parseFloat(num)) && isFinite(num)) {
        num = Number(num);
        // 處理小數點位數
        num = (typeof precision !== 'undefined' ? num.toFixed(precision) : num).toString();
        // 分離數字的小數部分和整數部分
        parts = num.split('.');
        // 整數部分加[separator]分隔, 借用一個著名的正則表達式
        parts[0] = parts[0].toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + ',');

        return parts.join('.');
    }
    return NaN;
}


/**
 * @func unformat
 * @desc 將加了千位符的各字符串轉換爲數字
 * @param {String} str 需要被轉換爲數字的字符串
 * @author ll
 */
$scope.unformat = function(str){
    var num =str.split(",")
    var realnum = +(num.join(''))
    return realnum;
}

/**
 * @func updateCurMaketValue
 * @desc 更新心願清單總市值
 * @author wangxiong
 */
 $scope.updateCurMaketValue =  function() {
    var curTotalVal = 0.0;
    var rowObjs = $(".js-right-table").children();
    for (var i = 0; i < rowObjs.length; i++) {
        var rows = $(rowObjs[i]).children();
        var marketValObj = rows[4];
        var marketVal = $scope.unformat($(marketValObj).text());
        curTotalVal += parseFloat(marketVal);
        var cnameObj = rows[2];
        var cname=$(cnameObj).text();
    }
    $scope.marketPrice = curTotalVal.toFixed(2)
    var curTotalValStr = "佔用BP:" + $scope.formatNumber(curTotalVal,2);

    $(".js-market-value").html(curTotalValStr);

}

/**
 * @func calStockUnitAmount
 * @desc 獲取左側表該股剩餘股票數量
 * @author lizhexi
 */
$scope.calStockUnitAmount = function(stockNo) {
    var leftRowObj = $('#left' + stockNo);
    var leftrowObjs = $(leftRowObj).children();
    var unitAmount = $scope.unformat($(leftrowObjs[5]).text());
    return unitAmount;
}

/**
 * @func calCurUnitAmount
 * @desc 判斷心願清單某支股票數量是否超過券表中數量
 * @author lizhexi
 * @param Boolean  rlt  false-超過不可繼續操作 true-未超過可繼續操作
 */
$scope.calCurUnitAmount = function(stockNo, stockNum) {
    var rlt = false;
    var unitAmount = $scope.calStockUnitAmount(stockNo);
    if (stockNum >unitAmount) {
        rlt = false;
    }else{
        rlt = true;
    }
    return rlt;
}
/**
 * @func calStockUnitPrice
 * @desc 獲取左側表格指定股票單價
 * @author wangxiong
 */
$scope.calStockUnitPrice = function(stockNo) {
    var leftRowObj = $('#left' + stockNo);
    var leftrowObjs = $(leftRowObj).children();
    var unitPrice = $scope.unformat($(leftrowObjs[4]).text())
    return unitPrice;
}

/**
 * @func calCurMarketValue
 * @desc 判斷心願清單市值是否超過BP
 * @author wangxiong
 * @param Boolean  rlt  false-超過不可繼續操作 true-未超過可繼續操作
 */
$scope.calCurMarketValue = function(stockNo, stockNum, surplusBp) {
    var rlt = false;
    var unitPrice = $scope.calStockUnitPrice(stockNo);
    var curTotalVal = 0.0;
    var rowObjs = $(".js-right-table").children();
    for (var i = 0; i < rowObjs.length; i++) {
        var rows = $(rowObjs[i]).children();
        console.log('rows[1].text()', $(rows[1]).text())
        if (stockNo === $(rows[1]).text().split('.')[0]) {
            continue;
        }
        var marketValObj = rows[4];
        var marketVal = $scope.unformat($(marketValObj).text());
        curTotalVal += parseFloat(marketVal);
    }
    console.log(curTotalVal,stockNum,unitPrice,surplusBp)
    if (curTotalVal + stockNum * unitPrice > surplusBp) {
        rlt = false;
    }else{
        rlt = true;
    }
    return rlt;
}
/**
 * @func dealRightTableNo
 * @desc 處理右表編號
 * @author wangxiong
 */
$scope.dealRightTableNo = function() {
    var rowObjs = $(".js-right-table").children();
    for (var i = 0; i < rowObjs.length; i++) {
        var rows = $(rowObjs[i]).children();
        var rowNo = rows[0];
        $(rowNo).text(i + 1);
    }
}


/**
 * @func delayInputDeal
 * @desc 判斷輸入數量是否是數字。目前未判斷是否爲整百。可以日後改。
 * @author wangxiong
 */
$scope.delayInputDeal = function(data) {
    var curNumStr = $(data).val();
    var oldValue =$(data).attr("value");
    if(/^\d+$/.test(curNumStr)){
        /** 判斷輸入數量是否爲正整數 */
        var dealNumStr = curNumStr.replace(/\D/g,'');
        //console.log("oldVaue-->",oldValue,"dealNumStr-->",dealNumStr);
        $(data).val(dealNumStr);
        var stockNo = $(data).parent().parent().prev().prev().text();
        //console.log("stockNo-->",stockNo)
            var tempStr = dealNumStr;
            var surBp =$(".js-surplusBp-value").text().split(':')[1];
            $scope.surplusBP = $scope.unformat(surBp);

            /** 註釋掉了整手判斷的條件 */
            // if (tempStr % 100 == 0) {
                 var cAmount = $scope.calCurUnitAmount(stockNo.split('.')[0], parseInt(tempStr));
                    if(cAmount){


                         var rlt = $scope.calCurMarketValue(stockNo.split('.')[0],parseInt(tempStr),$scope.surplusBP);

                            if(rlt) {
                               $(data).attr("value",dealNumStr)
                               //console.log("cAmount--->",cAmount,"rlt-->",rlt,"替換成功",$(data).attr("value"));
                            }else{
                                $(data).val(oldValue);
                                csp.notify('notice', {
                                    msg: '超出剩餘槓桿BP，請重新確認數量',
                                    delay: 5000,
                                });

                                console.log("超出剩餘槓桿BP_input");
                            }
                        }else{
                            $(data).val(oldValue);
                            csp.notify('notice', {
                                msg: '超出券表中該支證券數量,請重新確認數量',
                                delay: 5000,
                            });


                            console.log("超出券表中該支證券數量");
                        }
            // } else {
            //     //TODO modal
            //     csp.notify('notice', {
            //         msg: '請輸入以100股爲單位的數據',
            //         delay: 15000,
            //     });
            //     $(data).val(oldValue);
            // }
            var unitPrice = $scope.calStockUnitPrice(stockNo.split('.')[0]);
            tempStr = $(data).val();
            var curVal = $scope.formatNumber(tempStr * unitPrice,2);
            $(data).parent().parent().next().html(curVal);
            $scope.updateCurMaketValue();
    }else{
        $(data).val(oldValue);
        csp.notify('notice', {
            msg: '請輸入正確格式數量',
            delay: 5000,
        });

    }


}

/**
 * @func tableOperator
 * @desc 操作心願單
 * @author wangxiong
 */
$scope.tableOperator = function() {
        $scope.dragLeftTable()
        $(".js-right-row").draggable({
            cursor: "move",
            cursorAt: { top: 0, left: 0 },
            helper: "clone",
            start: function() {
                var rows = $(this).children();
                var stockNo = $(rows[1]).html();
                drapingId = stockNo.split('.')[0];
                isAddrow = false;
            }
        });
        //數量增加100
        $(".caret.up.link").unbind("click").click(function() {
            var curNumStr = $(this).parent().prev().val();
            if (curNumStr == null || curNumStr == undefined || curNumStr == '') {
                curNumStr = '0';
            }
            var stockNo = $(this).parent().parent().parent().prev().prev().html();
            var stockInput = $(this).parent().prev().val();
            console.log("curNumStr", curNumStr);
            console.log("stockNo", stockNo);
            console.log("stockInput", stockInput);
            var surBp =$(".js-surplusBp-value").text().split(':')[1];
            $scope.surplusBP = $scope.unformat(surBp);
            console.log('input',$scope.surplusBP,surBp)
             var rlt = $scope.calCurMarketValue(stockNo.split('.')[0], parseInt(stockInput) + 100, $scope.surplusBP);
             var cAmount=$scope.calCurUnitAmount(stockNo.split('.')[0], parseInt(stockInput) + 100);
            if(cAmount){
                    if (rlt) {
                        var curNum = 0;
                        curNum = parseInt(curNumStr) + 100;
                        $(this).parent().prev().val(curNum);
                        $(this).parent().prev().attr("value",curNum);
                        var unitPrice = $scope.calStockUnitPrice(stockNo.split('.')[0]);
                        var curVal = $scope.formatNumber(curNum * unitPrice,2);

                        $(this).parent().parent().parent().next().html(curVal);
                    } else {
                        //TODO 對話框

                        csp.notify('notice', {
                            msg: '超出剩餘槓桿BP，請重新確認心願清單',
                            delay: 5000,
                        });
                        // $('.wish_list_tips').css("display","block");
                        // $scope.wishListTips = '超出剩餘槓桿BP，請重新確認心願清單'
                        //   $('.wish_list_tips').text($scope.wishListTips)
                        //    setTimeout(function(){
                        //        $scope.wishListTips = '';
                        //        $('.wish_list_tips').css("display","none");
                        //    }, 3000);

                        //console.log("超出剩餘槓桿");
                        console.log("數量增加失敗-->", stockNo);
                    }
               }else{

                 csp.notify('notice', {
                     msg: '超出券表中該支證券數量,請重新確認數量',
                     delay: 5000,
                 });
                //  $('.wish_list_tips').css("display","block");
                //  $scope.wishListTips = '超出券表中該支證券數量,請重新確認數量'
                //    $('.wish_list_tips').text($scope.wishListTips)
                //     setTimeout(function(){
                //         $scope.wishListTips = '';
                //         $('.wish_list_tips').css("display","none");
                //     }, 3000);

                   console.log("超出券表中該支證券數量");
               }
            $scope.updateCurMaketValue();
        });

        //數量減少100
        $(".caret.down.link").unbind("click").click(function() {
            var stockNo = $(this).parent().parent().parent().prev().prev().html();
            var curNumStr = $(this).parent().prev().val();
            var curNum = 0;
                    curNum = parseInt(curNumStr) - 100;
                    if (curNum >=0) {
                        $(this).parent().prev().val(curNum);
                        $(this).parent().prev().attr("value",curNum);
                        var unitPrice = $scope.calStockUnitPrice(stockNo.split('.')[0]);
                        var curVal = $scope.formatNumber(curNum * unitPrice,2);
                        $(this).parent().parent().parent().next().html(curVal);
                    } else if (curNum >= -100) {
                        $(this).parent().prev().val(0);
                        $(this).parent().prev().attr("value",0);
                        $(this).parent().parent().parent().next().html(formatNumber(0,2));
                    }

            $scope.updateCurMaketValue();
        });

        //防止非法字符
        $("input").focus(function(){
            var inputObj = this
            var $inputObj = $(inputObj)
            var oldValue = $inputObj.attr("value")
                $inputObj.off("keyup").on("keyup",function(event) {
                    if(event.keyCode == "13"){
                      $inputObj.blur();
                   }
                 });
                    $inputObj.unbind("blur").blur(function(){
                           $scope.delayInputDeal(inputObj);


                  })

        })
        //隱藏按鈕、顯示按鈕
        $(".input").on("mouseenter mouseleave", function(event) {
            var $me = $(this);
            if( event.type == "mouseenter"){
                $(this).children(".js-num-change").show();
            }else if(event.type == "mouseleave" ){
                 $(this).children(".js-num-change").hide();
            }
        });

        //刪除記錄
        $(".trash, .outline").on("click", function() {
            $(this).parent().parent().remove();
            $scope.dealRightTableNo();
            $scope.updateCurMaketValue();
        });


// //右邊拖動自行處理
$(".js-right-row").droppable({
    accept:".js-right-row ",
    drop: function(event, ui) {
        if (drapingId !== undefined && drapingId !== "" && drapingId !== null) {

                //移動一條記錄
                var dragRowObj = $('#right' + drapingId);
                var htmlStr = $(dragRowObj).html();
                var rowObjs = $(dragRowObj).children();
                var stockNo = $(rowObjs[1]).html();
                var stockName = $(rowObjs[2]).html();
                var stockNum1 = $(rowObjs[3]).children();
                var stockNum2 = $(stockNum1[0]).children();
                var stockNum = $(stockNum2[0]).val();
                var marketVal = $(rowObjs[4]).html();
                var stockTotal = $(stockNum2[2]).html();
                var idStr = "right" + drapingId;

                var insertHtmlStr = '<tr class="js-right-row warning" id="' + idStr + '"><td>' + 0 + '</td><td>'
                                + stockNo + '</td><td>' + stockName + '</td><td class="js-amount-right" style="padding-top:1px;padding-bottom:1px">'
                                + '<div class="ui icon input js-stock-num"><input type="text" value="'
                                + stockNum + '" style="width:100px;"><div class="js-num-change"><i class="caret up link icon"></i>'
                                + '<i class="caret down link icon"></i></div><div class="ui label" style="width:40%;color:rgba(39, 35, 35, 0.45);padding-top:14px;">'+stockTotal
                                +' </div></div></td><td class="js-num-right">'
                                + marketVal + '</td>'
                                + '<td><i class="trash outline big link icon" data-content="移除"></i>'
                                + '</td></tr>';
                var curRow = this;
                var parentObj = $(curRow);
                var pId = $(parentObj).attr("id");
                console.log("----->", pId);
                console.log("--->", 'right' + drapingId);
                if (pId == undefined || pId == "" || pId == null || pId === ('right' + drapingId)) {
                    return ;
                } else {
                    $(curRow).before(insertHtmlStr);
                    $(dragRowObj).remove();
                    $('.js-right-row').removeClass("warning");
                    $('#right' + drapingId).addClass("warning");

                    // setTimeout(function(){
                    //
                    //   $('#right' + drapingId).removeClass("warning");
                    // },4000);
                }
            $scope.tableOperator();
            $scope.dealRightTableNo();
        }
    }
});
}
/**
 * @func saveWishLists
 * @desc 保存用戶心願清單數據
 * @author
 */

 function wishList() {
     this.stockIndex = "";
     this.stockNo = "";
     this.stockName = "";
     this.stockNum = "";
     this.marketVal = "";
     this.stockTotal = "";
 }

 //獲取當前日期

$scope.getNowDate = function() {
    var nowdate = new Date();
    var year  = nowdate.getFullYear();
    var month = nowdate.getMonth() + 1;
    var day = nowdate.getDate();
    var datestr = "";
    datestr += year;
    if(month < 10) {
        datestr += "0";
    }
    datestr += month;
    if(day < 10) {
        datestr += "0";
    }
    datestr += day;
    return datestr;
}