您的位置：首页 > Web前端 > JavaScript

js拖拽效果 （制作模板）

2016-03-03 17:25 639 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航