JS实现鼠标拖动效果代码_js/jQuery

资料来源：网络整理时间：2023/3/4 1:18:46 共计：3617 浏览

偶尔可能需要用到这种鼠标拖动效果特效，发现一段不错的代码！也许以后可以用在zblog模板制作的主题配置内这么晚。

<!DOCTYPE html>

<html>

<head>

<style>

 #rubbishBox

 {

  float:left;

  height:200px;

  width:300px;

  background-color: grey; 

  -webkit-writing-mode: lr-tb;

  vertical-align: middle;

 }

 #dragBox

 {

  width: 304px;

  margin-left: 300px;

 } 

 #dragBox div

 {

  width:300px;

  height: 30px;

  border:2px dashed grey; 

  margin-bottom: 10px; 

 }

 #dragBox div:hover

 {

  background-color: silver;

 } 

</style>

</head>

<body>

<div id="rubbishBox">垃圾箱</div>

<div id="dragBox">

 <div>a鼠标把我拖进垃圾箱吧</div>

 <div>b鼠标把我拖进垃圾箱吧</div>

 <div>c鼠标把我拖进垃圾箱吧</div>

 <div>d鼠标把我拖进垃圾箱吧</div>

 <div>e鼠标把我拖进垃圾箱吧</div>

</div>

<script type="text/javascript">

 document.ondragover = function(ev) { ev.preventDefault(); };

 var dragChild = null;

 var length = document.getElementById("dragBox").childNodes.length;

 var nodes = document.getElementById("dragBox").childNodes;

 for(var i=0;i<length;i++)

 {

  if(nodes[i].nodeType==1)

  {

   if(nodes[i].getAttribute("class")=="drag")

   {

    nodes[i].setAttribute("draggable","true");

    nodes[i].ondragstart = function(ev)

    {

     var dt = ev.dataTransfer;

     dt.effectAllowed = "move";

     dt.setData("text/plain",this.innerText);

     dragChild = this;

    };

    nodes[i].ondragend = function(ev)

    {

     dragChild = null;

    };

   } 

  }      

 }

 

 var rubbishBox = document.getElementById("rubbishBox");

 rubbishBox.ondragover = function(ev){

  ev.dataTransfer.dropEffect = "move ";

  ev.preventDefault();

 };

 rubbishBox.ondragenter = function(){

  this.style.color = "white";

 };

 rubbishBox.ondrop = function(ev)

 {

  var dt = ev.dataTransfer;

  this.appendChild(document.createTextNode(dt.getData("text/plain")));

  this.appendChild(document.createElement("br"));

  document.getElementById("dragBox").removeChild(dragChild);

 }

</script>

</body>

</html>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：有哪些相见恨晚的在线网站_CSS学习 | ·下一条：CSS段落第一个文字空两格缩进text-indent 和文字之间间距调整letter-spacing_CSS学习