javascript中的图像拖动_Javascript_Jquery

javascript中的图像拖动

javascript jquery

javascript中的图像拖动,javascript,jquery,Javascript,Jquery,我正在尝试用javascript拖动图像我知道使用jQuery很容易实现，但我想使用javascript实现这是代码，但它不起作用 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head>

我正在尝试用javascript拖动图像我知道使用jQuery很容易实现，但我想使用javascript实现这是代码，但它不起作用

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>dragImage</title>
        <meta name="author" content="engy" />
        <!-- Date: 2015-02-17 -->
    </head>
    <body>
        <!--<img src="bbe.jpg" style="width:104px;height:128px">-->
        <!-- <img id = "img" src="bbe.jpg" style="position:absolute; TOP:posY; LEFT:posX; WIDTH:50px; HEIGHT:50px"> -->
        <!--top=y=155px;left=x=70px;-->



    <script>
        var flagdown = 0;
    </script>
    <script>
        function up() {

            flagdown = 0;
        }

        function down() {
            //document.write("jk");
            flagdown = 1;
        }

        function move(e) {
            if (flagdown == 1) {
                var posX = e.clientX;
                var posY = e.clientY;
                document.getElementById("img").style.marginLeft = posX;
                document.getElementById("img").style.marginTop = posY;
            }

        }
        document.onmousemove = move;    
    </script>
    </body>
</html>


#div1{宽度：350px；高度：70px；填充：10px；边框：1px实心35; aaaaaa；}
功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
将图像拖动到矩形中：

为什么不处理ondragstart事件？请参见以下示例：-

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="100">

</body>
</html>