39,087
社区成员
发帖
与我相关
我的任务
分享
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#DivControls ul
{
list-style: decimal;
}
#DivControls ul li
{
margin: 20px;
}
#MainDiv ul li
{
margin: 10px;
}
#MainDiv ul li label
{
text-align: right;
display: inline-block;
width: 120px;
}
#MainDiv ul li input
{
width: 260px;
}
</style>
<!–[if IE]>
<script src="Scripts/html5.js"></script>
<![endif]–>
<script src="Scripts/jquery-1.4.1.js"></script>
<script>
//拖拽之前
function drag(ev) {
ev.dataTransfer.setData('type', ev.target.type);
}
function allowDrop(ev) {
ev.preventDefault();
}
//当放置被拖数据时
function drop(ev) {
ev.preventDefault();
var type = ev.dataTransfer.getData("type");
console.log(type);
var control = "<li><label>控件:</label><input type='{0}'></input></li>";
control = String.format(control, type);
$('#' + ev.target.id + ' ul').append(control);
}
String.format = function () {
if (arguments.length == 0)
return null;
var str = arguments[0];
for (var i = 1; i < arguments.length; i++) {
var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
str = str.replace(re, arguments[i]);
}
return str;
};
</script>
</head>
<body>
<div style="border: 1px solid blue; height: 600px; width: 1200px; padding: 20px;">
<div id="DivControls" style="border: 1px solid blue; height: 580px; width: 400px; float: left">
<ul>
<li>
<label type="text" draggable="true" ondragstart="drag(event)">文本:</label>
<input type="text" draggable="true" ondragstart="drag(event)" readonly="true" />
</li>
<li>
<label>日期:</label>
<input type="date" draggable="true" ondragstart="drag(event)" />
</li>
<li>
<label>日期时间:</label>
<input type="datetime" draggable="true" ondragstart="drag(event)" />
</li>
<li>
<label>复选框:</label>
<input type="checkbox" draggable="true" ondragstart="drag(event)" />
</li>
<li>
<label>数字:</label>
<input type="number" draggable="true" ondragstart="drag(event)" />
</li>
</ul>
</div>
<div id="MainDiv" style="border: 1px solid blue; height: 580px; width: 750px; float: left; margin-left: 20px" ondragover="allowDrop(event)" ondrop="drop(event)">
<ul style="list-style: none;">
<li>
<label>用户名:</label><input type="text" /></li>
</ul>
</div>
</div>
</body>