js拖拽效果（制作模板）

来源：互联网发布：华为帐号无法获取数据编辑：程序博客网时间：2024/06/06 02:27
<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <title>Demo</title>  <script src="jquery.min.js"></script>  <style>        .drag {            /*border: 1px #d3dbde solid;*/            position: absolute;            /*width: 800px;*/            /*height: 400px;*/            /*background: #F2F6F8;*/            padding: 15px;            top: 188px;            left: 280px;            cursor: move;            z-index: 1000;        }        table {            width: 800px;            border-top: 1px solid #d3dbde;            border-right: 1px solid #d3dbde;        }        th {            height: 37px;            line-height: 37px;            border-left: 1px solid #d3dbde;            background-color: #F2F6F8;            border-bottom: 1px solid #d3dbde;        }        td {            border-bottom: 1px solid #d3dbde;            border-left: 1px solid #d3dbde;            padding: 5px;            text-indent: 5px;            text-align: center;            vertical-align: middle;            text-align: left;        }        .input-text {            border: 1px solid #bac7d2;            background: #f7fcfe; /* #f7fcfe #f3fafd*/            border-radius: 2px;            box-shadow: 2px 2px 2px #e7f1f7 inset;            padding-left: 8px;            height: 30px;            width: 280px;        }        .input-text2 {            border: 1px solid #bac7d2;            background: #f7fcfe; /* #f7fcfe #f3fafd*/            border-radius: 2px;            box-shadow: 2px 2px 2px #e7f1f7 inset;            padding-left: 8px;            height: 25px;        }    </style><script>        //生成拖拽        function _Generate() {            var str = "<div class=\"drag\">  <span style=\"font-weight:bold;\">" + $("#txtTitle").val(); +"</span></div>";            $("#divcontent").html($("#divcontent").html()+str);_Mone();                    }        $(function () {            _Mone();        });        function Save() {            $("#TextBox1").val($("#divcontent").html());        }        //拖拽        function _Mone()        {            var _move = false;//移动标记            var _x, _y;//鼠标离控件左上角的相对位置            var t;//当前激活层的对象            var newz = 1;//新对象的z-index            var oldz = 1;//旧对象的z-index                      $("div.drag").mousedown(function (e) {                _move = true;                newz = parseInt($(this).css("z-index"))                $(this).css({ "z-index": newz + oldz });                t = $(this);//初始化当前激活层的对象                _x = e.pageX - parseInt($(this).css("left"));//获得左边位置                _y = e.pageY - parseInt($(this).css("top"));//获得上边位置                $(this).fadeTo(20, 0.5);//点击后开始拖动并透明显示             });$("div.drag").mousemove(function (e) {                if (_move) {                    var x = e.pageX - _x;//移动时根据鼠标位置计算控件左上角的绝对位置                    var y = e.pageY - _y;                    t.css({ top: y, left: x });//控件新位置                      }            }).mouseup(function (e) {                _move = false;                t.fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明                oldz = parseInt(t.css("z-index"));//获得最后激活层的z-index            });/*            $(document).mousemove(function (e) {                if (_move) {                    var x = e.pageX - _x;//移动时根据鼠标位置计算控件左上角的绝对位置                    var y = e.pageY - _y;                    t.css({ top: y, left: x });//控件新位置                      }            }).mouseup(function (e) {                _move = false;                t.fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明                oldz = parseInt(t.css("z-index"));//获得最后激活层的z-index            });*/        }    </script> </head> <body>  <div id="divcontent">        <div class="drag">            <table>                <tr>                    <th>姓 名：</th>                    <td>                        <input id="Text3" type="text" class="input-text" />                    </td>                </tr>                <tr>                    <th>手机号码：</th>                    <td>                        <input id="Text4" type="text" class="input-text" />                    </td>                </tr>                                <tr>                    <th>地 址：</th>                    <td>                        <input id="Text9" type="text" class="input-text" />                    </td>                </tr>            </table>        </div>        <div class="drag">            <input id="Button2" type="button" value="保 存" class="btn" />        </div>        <!--  <div class="drag">来拖动我啦！2</div>-->    </div>    <div style="width: 480px;">        <table>            <tr>                <th><span style="color: red;">*</span>标 题：</th>                <td><input type="text" ID="txtTitle" Class="input-text2"/>                    <input id="Button1" type="button" value="生成拖拽" class="btn" onclick="_Generate();" />                </td>                <th>模板类别：</th>                <td><select ID="drpType" Class="input-text2"><option></option><select>                    </td>            </tr>            <tr>                <td colspan="4">                    <input id="btnInsetTable" type="button" value="新增文本框" class="btn" onclick="show();" />                    <div>                        <span style="color: red;">*</span>文本名称：<input type="text" ID="txtname" Class="input-text2"/>                          是否必填：<select ID="drpType" Class="input-text2"><option value="0">否</option><option value="1">是</option><select>                                                    字符长度：<input type="text" ID="txtSize" Class="input-text2"/>                    </div>                </td>            </tr>            <tr>                <td colspan="4">                   <div style="display:none;">    <input type="text" ID="TextBox1" Class="input-text2"/>   </div>                     <input id="btnSave" type="button" value="保存模板" onclick="Save();" class="btn" /></td>            </tr>        </table>    </div> </body></html>
0 0
js拖拽效果 （制作模板）

js拖拽效果（制作模板）
