console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过拖放实现添加、删除</title>
<style type="text/css">
    div>div{
        display:inline-block;
        padding:10px;
        background-color:#aaa;
        margin:3px;
    }
</style>
</head>
<body>
<div style="width:600px;border:1px solid black;">
    <h2>可将你喜欢的项目拖进收藏夹</h2>
    <div draggable="true" ondragstart="dsHandler(event);">项目1</div>
    <div draggable="true" ondragstart="dsHandler(event);">项目2</div>
    <div draggable="true" ondragstart="dsHandler(event);">项目3</div>
    <div draggable="true" ondragstart="dsHandler(event);">项目4</div>
    <div draggable="true" ondragstart="dsHandler(event);">项目5</div>
</div>
<div id="dest" style="width:400px;height:400px;border:1px solid black;float:left;">
    <h2 ondragleave="return false">收藏夹</h2>
</div>
 <div id="gb" draggable="false" style="float:left;width:100px;height:100px;border:1px solid black;">垃圾桶</div>
<script type="text/javascript">
    var dest = document.getElementById("dest");
    //开始拖动事件的事件监听器
    var dsHandler = function(evt){
        //将被拖动元素的innerHTML属性值设置成被拖动的数据
        evt.dataTransfer.setData("text/plain","<item>" + evt.target.innerHTML);
    }
    dest.ondrop = function(evt){
        var text = evt.dataTransfer.getData("text/plain");
        //如果text以<item>开头
        if(text.indexOf("<item>") == 0){
            //创建一个新的div元素
            var newEle = document.createElement("div");
            //以当前时间为该元素生成一个唯一的ID
            newEle.id = new Date().getUTCMilliseconds();
            //该元素内容为“拖”过来的数据
            newEle.innerHTML = text.substring(6);
            //设置该元素允许拖动
            newEle.draggable = "true";
            //为该元素的开始拖动事件指定监听器
            newEle.ondragstart = function(evt){
                //将被拖动元素的id属性值设置成被拖动的数据
                evt.dataTransfer.setData("text/plain","<remove>"+newEle.id);
            }
            dest.appendChild(newEle);
        }
    }
     // 当把被拖动元素“放”到垃圾桶上时激发该方法。
    document.getElementById("gb").ondrop = function(evt)
    {
        var id = evt.dataTransfer.getData("text/plain");
        // 如果id以<remove>开头
        if (id.indexOf("<remove>") == 0)
        {
            // 根据“拖”过来的数据，获取被拖动的元素
            var target = document.getElementById(id.substring(8));
            // 删除被拖动的元素
            dest.removeChild(target);
        }
    }
    document.ondragover = function(evt)
    {
        // 取消事件的默认行为
        return false;
    }
    document.ondragleave = function(evt){
    //取消被拖动的元素离开本元素时触发该事件
        return false;

    }
    document.ondrop = function(evt)
    {
        // 取消事件的默认行为
        return false;
    }
</script>
</body>
</html>