[html5]表格拖动

刺骨的言语ヽ痛彻心扉 2022-06-03 04:09 211阅读 0赞

表格拖动前：  
![表格拖动前][SouthEast]  
表格拖动后：  
![表格拖动后][SouthEast 1]

实现代码：

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;
    }

[SouthEast]: /images/20220603/0a1e25d8d4b3445d8f12ff79624f4d7f.png
[SouthEast 1]: /images/20220603/44d0ddd533fd4fa6a9fbc02e581b31b3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，211人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5元素复制拖动

<!DOCTYPE HTML> <html> <head> <style type="text/css"> div1 { width:198px

我不是女神ヾ/ 2023年03月04日 13:30/ 0 赞/ 28 阅读

相关 HTML 表格

目录 1. 创建表格 2. 表格属性 3. 表头单元格标签th 4. 表格标题capt

谁借莪１个温暖的怀抱￠/ 2022年12月26日 08:27/ 0 赞/ 298 阅读

相关 html表格宽度拖拽,拖动改变Table的列宽度

.resizeDivClass \{ position:relative; background-color:red; width:2; z-index:1; le

深藏阁楼爱情的钟/ 2022年10月10日 15:45/ 0 赞/ 582 阅读

相关 html5表格顶端对齐,HTML5中间对齐表格数据(HTML5 middle align in table data)

HTML5中间对齐表格数据(HTML5 middle align in table data) 我有一个大表，这是该表的最后一行： Back value="$\{plac

缺乏、安全感/ 2022年10月06日 12:46/ 0 赞/ 214 阅读

相关 html表格中为空怎么写,表格html5 html5里表格两空白列怎么写

html5/CSS3做一个表格给你写了个简单的课程表样式的表格看一下 table \{ border-collapse:collapse;text-align:cente

悠悠/ 2022年10月06日 00:34/ 0 赞/ 261 阅读

相关 HTML5拖动

1. ![这里写图片描述][20160614093625780] <style type="text/css"> div1, div2 <!--定义两个装图片的盒

叁歲伎倆/ 2022年08月23日 09:58/ 0 赞/ 196 阅读

相关 js表格拖动排序

原来从网上找的，使用了一段时间，后来发现还有jquery控件，直接使用了！jquery.tablednd\_0\_5.js 非js库的js表格拖动代码 <

超、凢脫俗/ 2022年08月12日 16:22/ 0 赞/ 241 阅读

相关 [html5]表格拖动

表格拖动前： ![表格拖动前][SouthEast] 表格拖动后： ![表格拖动后][SouthEast 1] 实现代码： function dragF

刺骨的言语ヽ痛彻心扉/ 2022年06月03日 04:09/ 0 赞/ 212 阅读

相关 HTML页面元素拖动

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

阳光穿透心脏的1/2处/ 2022年05月23日 09:24/ 0 赞/ 229 阅读

相关 JavaScript实现拖动滑块拼图验证（html5、canvas）

引言：滑块拖动验证现在很多地方都用到，周末就琢磨着写了一个，放上来，看看有没有人用得上！效果： ![20210315104557920.gif][]

川长思鸟来/ 2021年07月24日 13:07/ 0 赞/ 618 阅读