<div draggable="true">拖放源</div> <br> <div>(none)拖放目标</div> <div>(move)拖放目标</div> <div>(copy)拖放目标</div> <div>(link)拖放目标</div> <div></div> <script> //兼容IE8-浏览器 test.onmousedown =function(){ if(this.dragDrop){ this.dragDrop(); } } test.ondragstart = function(e){ e = e || event; //兼容firefox浏览器 e.dataTransfer.setData('text',''); e.dataTransfer.effectAllowed = 'all'; } target1.ondragenter = target2.ondragenter =target3.ondragenter =target4.ondragenter =function(e){ e = e || event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; }this.style.background = 'red'; } target1.ondragover = function(e){ e = e || event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } e.dataTransfer.dropEffect = 'none'; } target2.ondragover = function(e){ e = e || event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } e.dataTransfer.dropEffect = 'move'; } target3.ondragover = function(e){ e = e || event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } e.dataTransfer.dropEffect = 'copy'; } target4.ondragover = function(e){ e = e || event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } e.dataTransfer.dropEffect = 'link'; } target1.ondragleave = target2.ondragleave =target3.ondragleave =target4.ondragleave =function(e){ e = e || event; this.style.backgroundColor = 'lightblue'; } target1.ondrop = target2.ondrop =target3.ondrop =target4.ondrop =function(e){ e = e || event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } this.style.backgroundColor = 'orange'; } </script>
以上所述是小编给大家介绍的JavaScript原生拖放，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: