Question

当我抓住对象并试图放入div它没有工作，没有任何错误在控制台没有，逻辑上我做的一切都很好，我意识到我在做什么，但在这种情况下，我被卡住了。作为一个初学者肯定是艰难的，我很确定我在我的代码中做了一些愚蠢的错误。我很容易在div中删除1个对象实例，但丢弃多个实例肯定是另一个硬核。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<style type="text/css">
    .objects{
        display:inline-block;
        background-color:#FFF3CC;
        border:#DFBC6A 1px solid;
        width:50px;
        height:50px;
        margin:10px;
        padding:8px;
        font-size:18px;
        text-align: center;
        box-shadow:2px 2px 2px #999;
        cursor:move;
    }
    #drop_zone{
        background-color:#EEE;
        border:#999 1px solid;
        width:280px;
        height:200px;
        padding:8px;
        font-size:18px;
    }


</style>
<script type="text/javascript">
    function _(id){
        return document.getElementById(id);
    }
    var droppedIn=false;

    function drag_enter(event){
        _('app_status').innerHTML="You are Dragging over the"+event.target.getAttribute('id');
    }
    function drag_leave(event){
        _('app_status').innerHTML="You Left The "+event.target.getAttribute('id');
    }
    function drag_start(event) {

        _('app_status').innerHTML="You are Dragging"+event.target.getAttribute('id');
        event.dataTransfer.dropEffect="move";
        event.dataTransfer.setData("text",event.target.getAttribute('id'));
    }
    function drag_drop(event){
        event.preventDefault();
        var data=event.dataTransfer.getData("text");
        event.target.appendChild(_(data));
        droppedIn=true;

    }
    function drag_end(event){
        if(droppedIn=false){
            _('app_status').innerHTML="You let the"+event.target.getAttribute('id')+"go";
        }
        droppedIn=false;
    }
</script>
<h2 id="app_status">App Status....</h2>
<h1>Drop Zone</h1>
<div id="drop_zone" ondragenter="drag_enter(event)" ondrop="drag_drop(event)" draggable="true"></div>
    <div id="object1" class="objects" draggable="true" ondragstart="drag_start(event)"></div>
    <div id="object2" class="objects" draggable="true" ondragstart="drag_start(event)"></div>
    <div id="object3" class="objects" draggable="true" ondragstart="drag_start(event)" ondragend="drag_end(event)"></div>
    <hr>
    <button onclick="readDropZone()">GetObjectData</button>
</body>
</html>

拖拽删除Javascript没有正常工作

0 个答案: