JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="drag-elements">
    <li id="A" draggable="true"><img src="http://images.cnblogs.com/cnblogs_com/jscode/556652/o_baidu.jpg" alt="" /></li>
    <li id="B" draggable="true"><img src="http://images.cnblogs.com/cnblogs_com/jscode/556652/o_163.jpg" alt="" /></li>
    <li id="C" draggable="true"><img src="http://images.cnblogs.com/cnblogs_com/jscode/556652/o_iqiyi.jpg" alt="" /></li>
    <li id="D" draggable="true"><img src="http://images.cnblogs.com/cnblogs_com/jscode/556652/o_qq.jpg" alt="" /></li>
    <li id="E" draggable="true"><img src="http://images.cnblogs.com/cnblogs_com/jscode/556652/o_weibo.jpg" alt="" /></li>
    <li id="F" draggable="true"><img src="http://images.cnblogs.com/cnblogs_com/jscode/556652/o_taobao.jpg" alt="" /></li>
    <li id="G" draggable="true"><img src="http://images.cnblogs.com/cnblogs_com/jscode/556652/o_youku.jpg" alt="" /></li>
    <li id="H" draggable="true"><img src="http://images.cnblogs.com/cnblogs_com/jscode/556652/o_hao123.jpg" alt="" /></li>
</ul>

CSS

ul {
    margin:20px auto;
    width:800px;
    zoom:1;
}
ul:after{
    content:".";
    display:block;
    font-size:0;
    line-height:0;
    clear:both;
    visibility:hidden;
}
li {
    width:200px;
    height:125px;
    float:left;
    background-color:#CCC;
    text-align:center;
    line-height:120px;
    font-size:50px;
    color:#F60;
}
.dragStart img{
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: grayscale(100%); 
    filter: gray; 
}

JavaScript

var dragElements = document.querySelectorAll('#drag-elements li');

var elementDragged = null;

for (var i = 0; i < dragElements.length; i++) {

    dragElements[i].addEventListener('dragstart', function (e) {
        e.dataTransfer.setData('text', this.id);
        elementDragged = this;
    });

    dragElements[i].addEventListener('dragend', function (e) {
        elementDragged = null;
    });

    dragElements[i].addEventListener('dragover', function (e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
        elementDragged.setAttribute('class', 'dragStart');
        return false;
    });
    
    dragElements[i].addEventListener('dragenter', function(e) {
        e.preventDefault();
        e.stopPropagation();
        if (this.id != elementDragged.id) {
            var tempInnerHtml = this.innerHTML;
            this.innerHTML = elementDragged.innerHTML;
            elementDragged.innerHTML = tempInnerHtml;
            elementDragged.removeAttribute('class');
            elementDragged = this;
        }
    });
    
    dragElements[i].addEventListener('dragleave', function(e) {
        e.preventDefault();
        e.stopPropagation();
        if (this.id != elementDragged.id) {
            this.removeAttribute('class');
        }
    });

    dragElements[i].addEventListener('drop', function (e) {
        e.preventDefault();
        e.stopPropagation();
        
        var targetId = e.dataTransfer.getData('text');
        //测试用，可以用 e.dataTransfer 可以在被拖动元素与目标元素之间传送信息，chrome下暂时有bug，在dragover、dragleave、dragenter中无法获取
        elementDragged.removeAttribute('class');
        return false;
    });

};