html5+javascript div拖拽

浏览数：14 / 时间：2015年06月08日

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5-Drag-Demo by 顽Shi</title>
  <style>
    .column {
      height: 200px;
      width: 200px;
      float: left;
      border: 1px solid black;
      background-color: green;
      margin-right: 5px;
      text-align: center;
      cursor: move;
    }
    .column header {
      color: black;
      text-shadow: #000 0 1px;
      box-shadow: 5px;
      padding: 5px;
      background: red;
      border-bottom: 1px solid black;
    }
    .column.over {
      border: 3px dashed #000;
    }
  </style>
</head>
<body>
  <div id="columns">
    <div class="column" draggable="true"><header>div1</header></div>
    <div class="column" draggable="true" ><header>div2</header></div>
    <div class="column" draggable="true"><header>div3</header></div>
	  <div class="column" draggable="true"><header>div4</header></div>
    <div class="column" draggable="true"><header>div5</header></div>
    <div class="column" draggable="true"><header>div6</header></div>
  </div>
</body>
<script>
  var columns = document.querySelectorAll(‘#columns .column‘);
  var colum = document.getElementById(‘columns‘);
  var dragEl = null;
  window.onload= function(){
		for(var i in columns){
			columns[i].index = i;
		}
  };
  [].forEach.call(columns,function(column){
    column.addEventListener("dragstart",domdrugstart,false);
    column.addEventListener(‘dragenter‘, domdrugenter, false);
    column.addEventListener(‘dragover‘, domdrugover, false);
    column.addEventListener(‘dragleave‘, domdrugleave, false);
    column.addEventListener(‘drop‘, domdrop, false);
    column.addEventListener(‘dragend‘, domdrapend, false);    
  });
   
  function domdrugstart(e) {
    e.target.style.opacity = ‘0.5‘;
     
    dragEl = this;
     
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/html",this.innerHTML);
  }
  function domdrugenter(e) {
    e.target.classList.add(‘over‘);
  }
  function domdrugover(e) {
    if (e.preventDefault) {
      e.preventDefault(); 
    }
 
    e.dataTransfer.dropEffect = ‘move‘;
 
    return false;
  }
  function domdrugleave(e) {
    e.target.classList.remove(‘over‘); 
  }   
  function domdrop(e) {
    if (e.stopPropagation) {
      e.stopPropagation();
    }
     
    if (dragEl != this) {
	  //dragEl.innerHTML = this.innerHTML;//目标位置存放当前dom
      //this.innerHTML = e.dataTransfer.getData(‘text/html‘);//当前dom存放目标位置的dom
		
  	  var list=document.getElementById("columns");
      var newIndex = parseInt(this.index);
      var locIndex = parseInt(dragEl.index);
      var node=document.getElementById("columns").children[locIndex];
  		list.insertBefore(node,list.children[newIndex]);

      var newColumns = document.querySelectorAll(‘#columns .column‘);
      for(var i = 0; i < newColumns.length; i++){
        newColumns[i].index = i;
      }

    }    
     
    return false;
  }
  function domdrapend(e) {
    [].forEach.call(columns, function (column) {
      column.classList.remove(‘over‘);
       column.style.opacity = ‘1‘;
    });
    
  }     
</script>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。