HTML5拖放示例
<title>Drag-n-Drop demo</title>
<style>
#mainText{color:blue}
#section1, #section3 {float:left; width:165px; height:165px; padding:20px; margin:10px}
#section1 { background-color: #00ff00; }
#section2 { background-color: #0ff000; }
#dragMe1, #dragMe2, #dragMe3 { width:100px; height:30px; padding:5px; margin:5px; }
</style>
<script type="text/javascript">
function dragStart(e) {
e.dataTransfer.effectAllowed='move';
e.dataTransfer.setData("Text", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target,0,0);
return true;
}
function dragEnd(e) {
e.dataTransfer.clearData("Text");
return true
}
function dragEnter(e) {
var idelt = e.dataTransfer.getData("Text");
return true;
}
function dragOver(e) {
var articleID = e.dataTransfer.getData("Text");
var sectionId = e.target.getAttribute('id');
if( articleID=="dragMe3" || sectionId == "section1" || (sectionId == "section2" && articleID == "dragMe1") ||
(sectionId == "section3" && articleID == "dragMe2") )
return false;
else
return true;
}
function dragDrop(e) {
var idelt = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(idelt));
e.stopPropagation();
return false;
}
</script>
</head>
<body>
<h1>Example of Drag-n-drop </h1>
<article id="mainText"> please select the text from box and drag them outside the box </article>
<section id="section1" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
<article id="dragMe1" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">Drag The Following</article>
<article id="dragMe2" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">mcn it solution</article>
<article id="dragMe3" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">onitroad.com</article>
</section>
<section id="section3" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></section>
拖放（Drag & Drop）
- 拖放是非常重要的和常见功能，可以更具互动，成为HTML5标准的一部分。
- 它很容易抓取一个项目并将物品拖动到不同的位置。
- 拖放是HTML5中标准的一部分，它指出任何元素可以拖动。
- 拖放是强大的用户界面概念，它可以在鼠标点击鼠标的帮助下易于复制，重新排序和删除项目。
- 所有主要浏览器都支持HTML 5，如Chrome，Firefox 3.5和Safari 4等。
说明：
- 我们必须将draggable属性设置为true才能使元素可拖动。
<img draggable="true"
- ondragover事件指定可以将拖动的数据拖放到的位置。
日期：2020-04-11 23:04:21 来源：oir作者：oir