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

HTML5中使用拖拽实例（一）

2012-08-14 16:59 253 查看

来源于Lynda.com.HTML5.Geolocation.in.Depth教程，我做了一些简单的注释。

关于html5中关于drap and drop的部分参见这个地址：

http://www.w3.org/TR/html5/dnd.html#the-dragevent-and-datatransfer-interfaces

示例的html文件：

<!DOCTYPE html>
<html>



<head>
<title>
Drag and Drop Example: Rock, Paper, Scissors (1.0.8)
</title>
<link rel="stylesheet" type="text/css" href="../CSS/main.css" />
<link rel="stylesheet" type="text/css" href="../CSS/rps.css" />
<script type="text/javascript">
var dndSupported; // true if drag and drop supported
var dndEls = new Array();
var draggingElement;
var winners = {
Rock: 'Paper',
Paper: 'Scissors',
Scissors: 'Rock'
};

var hoverBorderStyle = '2px dashed #999';
var normalBorderStyle = '2px solid white';

// 检测浏览器是否支持drag and drop
function detectDragAndDrop() {
if (navigator.appName == 'Microsoft Internet Explorer') {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) {
var rv = parseFloat( RegExp.$1 );
if(rv >= 6.0) return true;
}
return false;
}
if ('draggable' in document.createElement('span')) return true;
return false;
}

// DnD support
function handleDragStart(e) {
var rpsType = getRPSType(this);
draggingElement = this;
draggingElement.className = 'moving';
statusMessage('Drag ' + rpsType);
this.style.opacity = '0.4';
this.style.border = hoverBorderStyle;
e.dataTransfer.setDragImage(getRPSImg(this), 120, 120); // set the drag image

}

function handleDragEnd(e) {
this.style.opacity = '1.0';

// reset the element style
draggingElement.className = undefined;
draggingElement = undefined;

// reset all of the elements
for(var i = 0; i < dndEls.length; i++) {
dndEls[i].style.border = normalBorderStyle;
}
}

function handleDragOver(e) {
// Event.preventDefault() 方法：必須適時執行這個方法，來避免預設的動作被執行。
// 在ondragover中一定要執行preventDefault()，ondrop事件才會被觸發。
// 另外，從其他應用軟體或是文件拖曳東西進來，尤其是圖片時，預設的動作是顯示這個圖片或檔案，而不是真的執行drop。
// 這個時候要用document的ondragover事件把他擋掉。
if(e.preventDefault) e.preventDefault();
this.style.border = hoverBorderStyle;

return false; // some browsers may need this to prevent default action
}

function handleDragEnter(e) {
if(this !== draggingElement) statusMessage('Hover ' + getRPSType(draggingElement) + ' over ' + getRPSType(this));
this.style.border = hoverBorderStyle;
}

function handleDragLeave(e) {
this.style.border = normalBorderStyle;
}

function handleDrop(e) {
if(e.stopPropegation) e.stopPropagation(); // Stops some browsers from redirecting.
if(e.preventDefault) e.preventDefault();
if(this.id === draggingElement.id) return;
else isWinner(this, draggingElement);
}

// utility functions
function isWinner(under, over) {
var underType = getRPSType(under);
var overType = getRPSType(over);
if(overType == winners[underType]) {
statusMessage(overType + ' beats ' + underType);
swapRPS(under, over);
} else {
statusMessage(overType + ' does not beat ' + underType);
}
}

function getRPSFooter(e) {
var children = e.childNodes;
for( var i = 0; i < children.length; i++ ) {
if( children[i].nodeName.toLowerCase() == 'footer' ) return children[i];
}
return undefined;
}

function getRPSImg(e) {
var children = e.childNodes;
for( var i = 0; i < children.length; i++ ) {
if( children[i].nodeName.toLowerCase() == 'img' ) return children[i];
}
return undefined;
}

function getRPSType(e) {
var footer = getRPSFooter(e);
if(footer) return footer.innerHTML;
else return undefined;
}

function swapRPS(a, b) {
var holding = Object();

holding.img = getRPSImg(a);
holding.src = holding.img.src;
holding.footer = getRPSFooter(a);
holding.type = holding.footer.innerHTML;

holding.img.src = getRPSImg(b).src;
holding.footer.innerHTML = getRPSType(b);

getRPSImg(b).src = holding.src;
getRPSFooter(b).innerHTML = holding.type;
}

// Utility functions

var elStatus;
function element(id) { return document.getElementById(id); }
// 状态消息
function statusMessage(s) {
if(!elStatus) elStatus = element('statusMessage');
if(!elStatus) return;
if(s) elStatus.innerHTML = s;
else elStatus.innerHTML = ' ';
}

// App lifetime support

function init() {
if((dndSupported = detectDragAndDrop())) {
statusMessage('Using HTML5 Drag and Drop');
dndEls.push(element('rps1'), element('rps2'), element('rps3'));
for(var i = 0; i < dndEls.length; i++) {
// 注册drag and drop事件响应函数

// 开始拖拽时触发
dndEls[i].addEventListener('dragstart', handleDragStart, false);
// 在drop事件后触发
dndEls[i].addEventListener('dragend', handleDragEnd, false);
// 在被拖拽对象位于目标对象之上移动时触发
dndEls[i].addEventListener('dragover', handleDragOver, false);
// 在被拖拽对象进入目标对象时触发
dndEls[i].addEventListener('dragenter', handleDragEnter, false);
// 在被拖拽对象离开目标对象时触发
dndEls[i].addEventListener('dragleave', handleDragLeave, false);
// 在被拖拽对象位于目标对象之上放开鼠标按键时触发
dndEls[i].addEventListener('drop', handleDrop, false);
}
} else {
statusMessage('This browser does not support Drag and Drop');
}
}

window.onload = function() {
init();
}
</script>
</head>

<body>

<div id="content">

<h1>
Drag and Drop Example: Rock, Paper, Scissors (1.0.8)
</h1>

<p class="message" id="statusMessage" />

<div id="columns">

<div class="rps" id="rps1"><img src="../Images/Rock.png" draggable="true" /><footer>Rock</Footer></div>
<div class="rps" id="rps2"><img src="../Images/Paper.png" draggable="true" /><footer>Paper</Footer></div>
<div class="rps" id="rps3"><img src="../Images/Scissors.png" draggable="true" /><footer>Scissors</Footer></div>
</div>

<p id="clear" /> 

</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 function stylesheet microsoft class div

相关文章推荐

新的分享

章节导航