JS怎么实现列表里的只能拖动一次，不能重复？

效果：请问这个实现列表里的只能拖动一次，不能重复？

代码：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#members {

width: 200px;

}

#left {

border: 2px dashed black;

width: 150px;

height: 200px;

float: left;

}

#right {

border: 2px dashed black;

width: 150px;

height: 200px;

float: left;

margin-left: 20px;

}

.validTarget {

background-color: skyblue;

}

.enterTarget {

background-color: yellow;

}

</style>

</head>

<body>

<li draggable="true">Brian Albers</li>

<li draggable="true">Frank Salim</li>

<li draggable="true">Jenifer Clark</li>

<li draggable="true">John Kemble</li>

<li draggable="true">Lorraine Gaunce</li>

<li draggable="true">Morgan Stephen</li>

<li draggable="true">Peter Lubbers</li>

<li draggable="true">Vanessa Combs</li>

<li draggable="true">Vivian Lopez</li>

</ul>

var lis = document.querySelectorAll("#members > li");

//console.log(lis);

var left = document.getElementById("left");

var right = document.getElementById("right");

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

lis[i].ondragstart = function (e) {

left.className = "validTarget";

right.className = "validTarget";

e.dataTransfer.setData("text/plain", e.target.innerText);

}

lis[i].ondragend = function () {

left.className = null;

right.className = null;

}

function handleDragEnter(e) {

e.preventDefault();

}

function handleDragLeave() {

this.className = "validTarget";

}

function handleDragOver(e) {

this.className = "enterTarget";

e.preventDefault();

}

left.ondragenter = handleDragEnter;

right.ondragenter = handleDragEnter;

left.ondragover = handleDragOver;

right.ondragover = handleDragOver;

left.ondragleave = handleDragLeave;

right.ondragleave = handleDragLeave;

left.ondrop = handleDrop;

right.ondrop = handleDrop;

function handleDrop(e) {

var newli = document.createElement("li");

newli.innerText = e.dataTransfer.getData("text/plain");

this.appendChild(newli);

}

</script>

</body>

</html>

你做个标记就好了，通过标记来判断。

定义一个变量，没有拖动的时候设置一个初值，拖动以后改掉，通过if语句判断实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #members {
            width: 200px;
        }
        #left {
            border: 2px dashed black;
            width: 150px;
            height: 200px;
            float: left;
        }
        #right {
            border: 2px dashed black;
            width: 150px;
            height: 200px;
            float: left;
            margin-left: 20px;
        }
        .validTarget {
            background-color: skyblue;
        }
        .enterTarget {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul id="members">
        <li draggable="true">Brian Albers</li>
        <li draggable="true">Frank Salim</li>
        <li draggable="true">Jenifer Clark</li>
        <li draggable="true">John Kemble</li>
        <li draggable="true">Lorraine Gaunce</li>
        <li draggable="true">Mark Wang</li>
        <li draggable="true">Morgan Stephen</li>
        <li draggable="true">Peter Lubbers</li>
        <li draggable="true">Vanessa Combs</li>
        <li draggable="true">Vivian Lopez</li>
    </ul>
    <ul id="left"></ul>
    <ul id="right"></ul>
    <script>
	    var dragobj;
        var lis = document.querySelectorAll("#members > li");
        //console.log(lis);
        var left = document.getElementById("left");
        var right = document.getElementById("right");
        for (var i = 0; i < lis.length; i++) {
            lis[i].ondragstart = function (e) {
                left.className = "validTarget";
                right.className = "validTarget";
                dragobj = this;
                e.dataTransfer.setData("text/plain", e.target.innerText);
            }
            lis[i].ondragend = function () {
                left.className = null;
                right.className = null;
            }
        }
        function handleDragEnter(e) {
            e.preventDefault();
        }
        function handleDragLeave() {
            this.className = "validTarget";
        }
        function handleDragOver(e) {
            this.className = "enterTarget";
            e.preventDefault();
        }
        left.ondragenter = handleDragEnter;
        right.ondragenter = handleDragEnter;
        left.ondragover = handleDragOver;
        right.ondragover = handleDragOver;
        left.ondragleave = handleDragLeave;
        right.ondragleave = handleDragLeave;
        left.ondrop = handleDrop;
        right.ondrop = handleDrop;
        function handleDrop(e) {
	        if (dragobj.getAttribute("no-drag")=="1") return;
            var newli = document.createElement("li");
            newli.innerText = e.dataTransfer.getData("text/plain");
            this.appendChild(newli);
            dragobj.setAttribute("no-drag","1");
        }
    </script>
</body>
</html>