拖放 - Javascript答案

【问题标题】：Drag and drop - Javascript拖放 - Javascript
【发布时间】：2016-02-21 23:23:05
【问题描述】：

我一直试图让我的拖放工作，无法弄清楚它有什么问题。

我基本上不能将图像拖放到身体图像。

我尝试JSLint/JSHint 清理我的代码，但这并没有帮助我让它工作。

有人可以帮帮我吗？

<!DOCTYPE html>
<html>
    <head>
        <title>Drag and Drop</title>
        <style>
            div#OuterDiv {
                border: 1px solid black;
                position: relative;
                width: 1000px;
                height: 1000px;
                background-color: gray;
                color: white;
                font: times new roman;
            }
        </style>
    </head>

    <body>
        <script language="text/javascript">
            'use strict';
            var ie4 = ua.indexOf("MSIE 4.0");

            var curElement;
            window.onload = opening;
            document.ondragstart = doDragStart;
            document.onmousedown = doMouseDown;
            document.onmousemove = doMouseMove;
            document.onmouseup = new Function("curElement=null");


            function opening() {
                if (ie4Final) {
                    if (body.style.display === "none") {
                        OuterDiv.filters[0].Apply();
                        body.style.display = "";
                        OuterDiv.filters[0].Play();
                    }
                } else {
                    if (betaVer >= 2) {
                        body.style.display = "";
                    }
                }
            }

            function doMouseMove() {
                var newleft = 0,
                    newTop = 0;
                if ((event.button === 1) && (curElement !== null)) {
                    newleft = window.event.x - tx;
                    if (newleft < 0) {
                        newleft = 0;
                        if (newleft + curElement.width > document.all.OuterDiv.offsetWidth) newleft = document.all.OuterDiv.offsetWidth - curElement.offsetWidth;
                        curElement.style.pixelLeft = newleft;
                        newtop = event.clientY - document.all.OuterDiv.offsetTop - (curElement.offsetHeight / 2);
                        if (newtop < 0) {
                            newtop = 0;
                            if (newtop + curElement.height > document.all.OuterDiv.offsetHeight) newtop = window.event.y - ty;
                            curElement.style.pixelTop = newtop;
                            event.returnValue = false;
                            event.cancelBubble = true;
                        }
                    }

                    function doDragStart() {
                        if ("IMG" === event.srcElement.tagName) {
                            event.returnValue = false;
                        }
                    }


                    function doMouseDown() {
                        if ((event.button === 1) && (event.srcElement.tagName === "img")) {
                            tx = window.event.x - event.srcElement.style.pixelLeft;
                            ty = window.event.y - event.srcElement.style.pixelTop;
                            curElement = event.srcElement;
                        }
                    }
        </script>
        <script FOR="body" event="onMouseDown">
            event.cancelBubble = true;
        </script>
        <div id="OuterDiv">
            <h1><Center>Drag and Drop - potato head</center></h1>

            <img ID="body" style="position:absolute;left:10;top:190;z-index:19;" src="BODY.GIF" />
            <img ID="ear1" style="position:absolute;left:60;top:70;z-index:19;" src="EAR1.GIF" />
            <img ID="ear2" style="position:absolute;left120;top:70;z-index:19;" src="EAR2.GIF">
            <img ID="glasses4" style="position:absolute;left:120;top:70;z-index:19;" src="GLASSES4.GIF" />
            <img ID="mouth1" style="position:absolute;left:290;top:70;z-index:19;" src="MOUTH1.GIF" />
            <img ID="nose1" style="position:absolute;left:450;top:70;z-index:19;" src="NOSE1.GIF" />
            <img ID="eyes4" style="position:absolute;left:510;top:70;z-index:19;" src="EYES4.GIF" />
        </div>
    </body>

</html>

【问题讨论】：

在我看来你正在尝试这样做：w3schools.com/html/html5_draganddrop.asp我错了吗？
不，你是对的，这就是我想要做的
那么，这对您来说是一个好的解决方案吗？它似乎比你所有的代码都简单，并且被所有主流浏览器支持。
您需要使用其他事件类型：ondragover 和 ondrop 才能完成这项工作。
对不起，我是新手。当你说其他时，你是什么意思？而不是哪个事件？

标签： javascript html drag-and-drop

【解决方案1】：

你可以试试下一个代码：

function ondrop(ev){
  var FieldClone=document.getElementByID("textField").clone(true);
  ev.target.appendChild(FieldClone);
}

<input type="text" id="textField" value="Drop me" name="" draggable="true">
    <div id="sec_drop" ondrop="drop(event)"style="width: 500px;height: 370px;"ondragover="allowDrop(event)">
</div>

【讨论】：