拖拽排序

作者: 李丹linda | 来源:发表于2019-04-26 11:08 被阅读0次

iOS collectionView拖拽排序
source code:TableviewGroup阴影加圆角
拖拽操作
小程序拖拽排序组件 Drag
2019-05-20
RecyclerView拖拽排序工具类
拖拽排序
拖拽排序
Swift - UICollectionView 长按拖拽
iOS 自适应标签拖拽排序

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5-Drag-Demo by 顽Shi</title>
  <style>
    #columns{
      width: 650px;
      height: 650px;
    }
    .column {
      box-sizing: border-box;
      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 dragEl = null;
  
  [].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;
      this.innerHTML = e.dataTransfer.getData('text/html');
    }    
    
    return false;
  }
  function domdrapend(e) {
    [].forEach.call(columns, function (column) {
      column.classList.remove('over');
       column.style.opacity = '1';
    });
  }     
</script>
</html>

拖拽.PNG