jQuery拖动组件实现

前端朋仔
334 阅读1分钟

3yayd-wndqf.gif

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <style>
    .container{
      width: 1200px;
      height: 800px;
      background: #000414;
      margin: 60px auto;
      padding: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
    .left{
      width: 600px;
      height: 100%;
      border: 1px solid #F00;
      border-radius: 20px;
      padding: 10px;
    }
    .right{
      width: 600px;
      height: 100%;
      margin-left: 30px;
      border: 1px solid #F00;
      border-radius: 20px;
      padding: 10px;
    }
    .row{
      width: 100%;
      height: 80px;
      /*background: #0a2a71;*/
      margin-bottom: 15px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
    .row-left{
      width: 100%;
      height: 80px;
      /*background: #0a2a71;*/
      border:1px solid #F00;
      margin-bottom: 15px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 10px 5px;
    }
    .type-one{
      width: 100%;
      height: 100%;
      background: #0a2a71;
      border-radius: 20px;
      color: white;
      text-align: center;
      line-height: 80px;
      font-size: 18px;
    }
    .type-two{
      width: 65%;
      height: 100%;
      background: #0a2a71;
      border-radius: 20px;
      color: white;
      text-align: center;
      line-height: 80px;
      font-size: 18px;
    }
    .type-three{
      width: 30%;
      height: 100%;
      background: #0a2a71;
      border-radius: 20px;
      color: white;
      text-align: center;
      line-height: 80px;
      font-size: 18px;
    }
    .border{
      border:1px solid #FFFFFF;
      background: transparent;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

<script>
  var dangqianDom;
  var endDom;
  var removeArr=[]
  var leftData=[
    {arr:[
        {type:3,name:''},
        {type:3,name:''},
        {type:3,name:''},
      ]},
    {arr:[
        {type:3,name:''},
        {type:3,name:''},
        {name: '',type: 3},
      ]}
  ]
  var rightData=[
    {type:1,name:'1'},
    {type:2,name:'2'},
    {type:2,name:'7'},
    {type:3,name:'3'},
    {type:3,name:'4'},
    {type:3,name:'5'},
    {type:3,name:'6'},
  ]
  initLeft()
  function initLeft(){
    var html = ''
    for(let i=0;i<leftData.length;i++){
      html+=' <div class="row-left" >'
      for(let m=0;m<leftData[i].arr.length;m++){
        const index = i+'-'+m
        let strClass =''
        if(leftData[i].arr[m].type == 1){
          strClass='type-one'
        }else if(leftData[i].arr[m].type == 2){
          strClass='type-two'
        }else if(leftData[i].arr[m].type == 3){
          strClass='type-three'
        }

        html+='<div class="'+strClass+' border" ondrop="drop(event)"  type="'+leftData[i].arr[m].type+'" index="'+index+'" ondragover="allowDrop(event)">'+leftData[i].arr[m].name+'</div>'
      }
      html+='</div>'
    }
    $('.left').append(html)
  }

  initRight()
  function initRight(){
    var html = ''
    for(let i=0;i<rightData.length;i++){
      html+=' <div class="row" >'
      if(rightData[i].type == 1){
        html+='<div class="type-one" draggable="true"  ondragstart="drag(event)" type="1" ondragend="mm(event)" index="'+i+'">'+rightData[i].name+'</div>'
      }else if(rightData[i].type == 2){
        html+='<div class="type-two" draggable="true"  ondragstart="drag(event)" type="2" ondragend="mm(event)" index="'+i+'">'+rightData[i].name+'</div>'
      }else if(rightData[i].type == 3){
        html+='<div class="type-three" draggable="true"  ondragstart="drag(event)" type="3" ondragend="mm(event)" index="'+i+'">'+rightData[i].name+'</div>'
      }

      html+='</div>'
    }
    $('.right').append(html)
  }
  function drag(e) {
    dangqianDom = e.toElement
    console.log('aaa',e)




    // debugger
    if (e.type === 'dragstart') {  //根据e.type判断是PC端还是移动端
      e = event ? event : e
    }else {
      if (event.touches) {
        e = event.touches[0] ? event.touches[0]:event;
      }
    }
    // dragOffset.X1 = e.clientX - parseInt(dance.style.left)
    // dragOffset.Y1 = e.clientY - parseInt(dance.style.top)
    // 鼠标点击的位置在整个页面上的坐标是（e.clientX，e.clientY）
    // 鼠标点击的位置在图片的位置坐标为（X1，Y1）
  }

  function drop(e) {
    // debugger
    if (e.type === 'drop'){
      e = event ? event : e
      e.preventDefault()
    } else {
      if (event.touches) {
        e = event.touches[0] ? event.touches[0]:event;
      }
    }
    dance.style.left = e.clientX - dragOffset.X1 + 'px'
    dance.style.top = e.clientY - dragOffset.Y1 + 'px'
    // 根据鼠标点击的位置在整个页面上的坐标和在图片上的坐标来确定整个图片的坐标
    // e.toElement.style.background = '00CCFF'

    //停止时触发
  }


  function allowDrop(e) {
    console.log('cc',e)
    e = event ? event : e
    // 移动过程中触发
    $('.type-three').css('background','transparent')
    e.currentTarget.style.background = 'red'
    const dangqianClass = $(dangqianDom)[0].className
    endDom = e.currentTarget
    // if (dangqianClass == 'type-three'){
    //   console.log('hhhh')
    // }
  }
  function mm(e){
    debugger
    console.log('ii',endDom)
    const dangIndex = $(dangqianDom).attr('index')
    const dangType = $(dangqianDom).attr('type')
    const index = $(endDom).attr('index')
    const endType = $(endDom).attr('type')
    const indexList = index.split('-')
    if(dangType == 1){
      for(let i=0;i<leftData[indexList[0]].arr.length;i++){
        removeArrFun(leftData[indexList[0]].arr[i])
      }
      leftData[indexList[0]].arr = [rightData[dangIndex]]
    }else if(dangType == 2){
      if(endType == 1){
        for(let i=0;i<leftData[indexList[0]].arr.length;i++){
          removeArrFun(leftData[indexList[0]].arr[i])
        }
        const arr = [ rightData[dangIndex],{type:3,name:''}]
        leftData[indexList[0]].arr = arr
      }else if(endType == 2){
        removeArrFun(leftData[indexList[0]].arr[indexList[1]])
        leftData[indexList[0]].arr[indexList[1]] = rightData[dangIndex]
      }else if(endType == 3){
        if(indexList[1] == 0){
          for(let i=0;i<leftData[indexList[0]].arr.length;i++){
            removeArrFun(leftData[indexList[0]].arr[i])
          }
          leftData[indexList[0]].arr = [rightData[dangIndex]]
          leftData[indexList[0]].arr.push({type:3,name:''},)
        }else if(indexList[1] == 2){
          removeArrFun(leftData[indexList[0]].arr[indexList[1] -1])
          removeArrFun(leftData[indexList[0]].arr[indexList[1]])
          leftData[indexList[0]].arr.splice(indexList[1] -1,2,rightData[dangIndex])
        }else if(indexList[1] == 1) {
          for(let i=0;i<leftData[indexList[0]].arr.length;i++){
            removeArrFun(leftData[indexList[0]].arr[i])
          }
          leftData[indexList[0]].arr = [{type:3,name:''},rightData[dangIndex]]
        }
      }
    }else if(dangType == 3){
      // 获取endType
      if(endType == 1){
        for(let i=0;i<leftData[indexList[0]].arr.length;i++){
          removeArrFun(leftData[indexList[0]].arr[i])
        }
        const arr =[{type:3,name:''}, {type:3,name:''}, {type:3,name:''}]
        arr[indexList[1]] = rightData[dangIndex]
        leftData[indexList[0]].arr = arr
      }else if(endType == 2){
        removeArrFun(leftData[indexList[0]].arr[indexList[1]])
        leftData[indexList[0]].arr.splice(indexList[1],1,rightData[dangIndex])
        leftData[indexList[0]].arr.push({type:3,name:''})
      }else if(endType == 3){
        removeArrFun(leftData[indexList[0]].arr[indexList[1]])
        leftData[indexList[0]].arr[indexList[1]] = rightData[dangIndex]
      }
    }

    $('.left').empty()
    initLeft()
    console.log(leftData)
    rightData.splice(dangIndex, 1)
    $('.right').empty()
    initRight()
    function removeArrFun(data){
      if(data.name != ''){
        rightData.push(data)
      }
      // removeArr.push(data)
    }
  }
</script>
</body>
</html>
avatar
文章
阅读
粉丝