여러 목록에 대한 반응으로 끌어서 놓기 구현

Question

여러 목록에 대해 반응이있는 & 끌어서 놓기를 구현하려고하지만이를 얻지 못했습니다!

내 색상 개체가 놓기 후에 변경되지만 정확한 위치에 항목이 배치되지 않습니다. 또한 draggig는 자리 표시 자도 유효한 드롭 영역 외부에 표시됩니다.

var colors = { 
    "a": ["Red", "Green", "Blue"], 
    "b": ["Yellow", "Black", "White", "Orange"] 
}; 
var placeholder = document.createElement("li"); 
placeholder.className = "placeholder"; 
var List = React.createClass({ 
    getInitialState: function() { 
     return { 
      data: this.props.data 
     }; 
    }, 
    dragStart: function(key, index, e) { 
     this.dragged = e.currentTarget; 
     this.contentToBeDragged_src = e.currentTarget.parentNode; 
     e.dataTransfer.effectAllowed = 'move'; 
     // Firefox requires dataTransfer data to be set 
     e.dataTransfer.setData("text/html", e.currentTarget); 
    }, 
    dragEnd: function(key, index, e) { 
     console.log(key + ' ' + index); 
     this.dragged.style.display = "block"; 
     //this.dragged.parentNode.removeChild(placeholder); 
     // Update data 
     var data = this.state.data; 
     var from = Number(this.dragged.dataset.id); 
     var to = Number(this.over.dataset.id); 
     data[index].splice(0, data[index].splice(from, 1)[0]); 
     this.setState({ 
      data: data 
     }); 
    }, 
    dragOver: function(e) { 
     e.preventDefault(); 
     //this.dragged.style.display = "none"; 
     if (e.target.className == "placeholder") return; 
     this.over = e.target; 
     // Inside the dragOver method 
     var relY = e.clientY - this.over.offsetTop; 
     var height = this.over.offsetHeight/2; 
     var parent = e.target.parentNode; 
     if (relY > height) { 
      this.nodePlacement = "after"; 
      parent.insertBefore(placeholder, e.target.nextElementSibling); 
     } else if (relY < height) { 
      this.nodePlacement = "before" 
      parent.insertBefore(placeholder, e.target); 
     } 
    }, 
    render: function() { 
     var context = this; 
     var lists = Object.keys(context.state.data).map(function(key) { 
      return <ul onDragOver = { 
        context.dragOver 
       } > { 
        context.state.data[key].map(function(item, i) { 
         return (< 
          li data - id = { 
           i 
          } 
          key = { 
           i 
          } 
          draggable = "true" 
          onDragEnd = { 
           (evt) => context.dragEnd(key, i, evt) 
          } 
          onDragStart = { 
           (evt) => context.dragStart(key, i, evt) 
          } > 
          { 
           item 
          } < 
          /li> 
         ) 
        }, context) 
       } < 
       /ul> 
     }); 

     return <div > { 
      lists 
     } < /div> 

    } 
}); 

ReactDOM.render(< 
    List data = { 
     colors 
    } 
    />, document.getElementById('app') 
); 

여기 내 시도가있는 jsfiddle입니다. jsfiddle

도움을 주시면 감사하겠습니다.

data[index].splice(0, data[index].splice(from, 1)[0]); 

첫 번째 문제는 당신이 (당신이 인덱스를 필요가 없습니다) data[key]을 사용해야 할 때 data[index]을 사용하는 것입니다 : 당신이 쓰는 곳

Answer 1

이 떨어지는 부분에 관해서는, 문제가 dragEnd()에 있습니다. 두 번째 문제는 이동 작업에 있으며 아마도 예상 한대로 작동하지 않을 것입니다. 그 행은 다음과 같습니다.

data[key].splice(to, 0, data[key].splice(from, 1)[0]);