HTML5实现的拖拽效果

2024-09-05 12:18:46

字体：大中小

来源：转载

供稿：网友

HTML5实现的拖拽效果，IE8暂不支持HTML5，因此观看效果请选用更高版本的IE9，或者火狐、Chrome或Opera等浏览器。

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>HTML5实现的拖拽效果</title><style type="text/css">#boxA, #boxB, #boxC {   float:left; width:165px; height:165px; padding:10px; margin:10px; }#boxA { background-color: #474747; }#boxB { background-color: #474747; }#boxC { background-color: #474747; }#drag, #drag2, #drag3 {  width:30px; height:30px; padding:5px; margin:5px;  -moz-user-select:none;}#drag { background-color: #e8e8e8;}#drag2 { background-color: orange;}#drag3 { background-color: purple; border:3px brown solid;}</style><script type="text/javascript">function dragStart(ev) {    ev.dataTransfer.effectAllowed='move';    //ev.dataTransfer.dropEffect='move';    ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));    ev.dataTransfer.setDragImage(ev.target,0,0);    return true;}function dragEnter(ev) {    var idelt = ev.dataTransfer.getData("Text");    return true;}function dragOver(ev) {    var idelt = ev.dataTransfer.getData("Text");    var id = ev.target.getAttribute('id');    if( (id =='boxB' || id =='boxA') && (idelt == 'drag' || idelt=='drag2'))        return false;    else if( id =='boxC' && idelt == 'drag3')        return false;    else        return true;}function dragEnd(ev) {    ev.dataTransfer.clearData("Text");    return true}function dragDrop(ev) {    var idelt = ev.dataTransfer.getData("Text");    ev.target.appendChild(document.getElementById(idelt));    ev.stopPropagation();    return false; // return false so the event will not be propagated to the browser}</script></head><body>    <h1>Drag and drop HTML5 demo</h1>    <div>there are many other variables that can be used also, we will coer this another day.    </div>    <div id="boxA"        ondragenter="return dragEnter(event)"        ondrop="return dragDrop(event)"        ondragover="return dragOver(event)">      <div id="drag" draggable="true"            ondragstart="return dragStart(event)"            ondragend="return dragEnd(event)">drag me</div>      <div id="drag2" draggable="true"            ondragstart="return dragStart(event)"            ondragend="return dragEnd(event)">drag me</div>      <div id="drag3" draggable="true"            ondragstart="return dragStart(event)"            ondragend="return dragEnd(event)">drag me</div>    </div>    <div id="boxB"        ondragenter="return dragEnter(event)"        ondrop="return dragDrop(event)"        ondragover="return dragOver(event)">    </div>    <div id="boxC"        ondragenter="return dragEnter(event)"        ondrop="return dragDrop(event)"        ondragover="return dragOver(event)">    </div>    <div style="clear:both">Example created by HTML Tutorials.</div><br></body></html>

上一篇：HTML5穿越星空，响应鼠标跟随

下一篇：HTML5+CSS3点击显示网页侧边栏的效果

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注