Question

我在this帖子中找到了对这个问题的有用答案，但现在我无法在屏幕上移动图像。除<p>标签中的文字外，图像不会移动到任何顶部，但我希望能够在没有任何文字的情况下移动图像。我该如何做到这一点？

<!DOCTYPE html>
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <aside draggable="true" id="dragme">
        <img src = "http://i65.tinypic.com/6sgbus.jpg" width = "96" height = "96">
    </aside>

<p>I never am really satisfied that I understand anything; because, understand it well as I may, my comprehension can only be an infinitesimal fraction of all I want to understand about the many connections and relations which occur to me, how the matter in question was first thought of or arrived at, etc., etc.</p>

    <script>
    function drag_start(event) {
        var style = window.getComputedStyle(event.target, null);
        event.dataTransfer.setData("text/plain",
        (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
    } 
    function drag_over(event) { 
        event.preventDefault(); 
        return false; 
    } 
    function drop(event) { 
        var offset = event.dataTransfer.getData("text/plain").split(',');
        var dm = document.getElementById('dragme');
        dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
        dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
        event.preventDefault();
        return false;
    } 
    var dm = document.getElementById('dragme'); 
    dm.addEventListener('dragstart',drag_start,false); 
    document.body.addEventListener('dragover',drag_over,false); 
    document.body.addEventListener('drop',drop,false); 
    </script>
    </body>
</html>

将图像移动到屏幕html5上的任何位置

0 个答案: