H5在IE9中的拖拽问题

XMPP 2016-05-08 04:52:40
我做了一个拖拽功能,在谷歌上正常,IE11上正常,在IE9上不能拖动,不知道为什么,麻烦大神帮忙看看。网上搜了把HTML5.js放到head中,我试了也没有用



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

...全文
120 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

39,081

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧