HTML5实现的拖拽效果

2014-04-07 06:15:31 -0400

代码说明

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

HTML代码

<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 <a href="http://html5tutorial.net/">HTML Tutorials</a>.</div><br>

代码演示

Drag and drop HTML5 demo

there are many other variables that can be used also, we will coer this another day.

drag me

drag me

drag me

Example created by HTML Tutorials.

«Newer Older»

Back to home

Subscribe | Register | Login | N