0

私と私のチームが画面上にいくつかの画像を自由に配置できるように、ページを作成しようとしています。問題は、それらの画像をドラッグ可能にする方法がわからないことです。私は自分で理解しようとしましたが、それについてのこの素晴らしいトピックに出くわしました：HTML5のドラッグアンドドロップで、画面上の任意の場所にdivを移動しますか？

このアイデアを自分のページに適用して、「getElementsByID」を「getElementsByClassName」に置き換えようとしましたが、サイコロはありません。

さらに、ドラッグ可能な画像がページの応答性を尊重するのであれば、誰かがそれを行う方法を知っていれば、2倍素晴らしいでしょう。

これが私の試みによるcodepenです：http：//codepen.io/GuiHarrison/pen/EsHyr

ありがとう！

4

2 に答える 2

0

さて、私はこれを作りました、それはちょっとバグがあります、しかしあなたはそれで遊ぶことができます。

<html>
<head>
    <style>
        #mydiv{
        width: 100px;
        height: 100px;
        border: solid black 1px;
        position: absolute;
        }
    </style> 
</head>
<body>
    <div id="mydiv" onmousedown="ismousedown(1)" onmouseup="ismousedown(0)" onmousemove="mousemove(event)"></div>
    <script>
        var mousedown = false;
        function ismousedown(tf){
            if(tf == 1){
            mousedown = true;
            }
            else{
                mousedown = false;
            }
        }
        function mousemove(event){
            if(mousedown){
                document.getElementById("mydiv").style.left=event.pageX;
                document.getElementById("mydiv").style.top=event.pageY;
            }
        }
    </script>
</body>

于 2013-03-01T14:25:16.490 に答える
0

これにはkineticjsを使用できます。これをチェックして！

http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

これはより関連性が高く、

http://html5example.net/entry/html5-canvas/html5-canvas-drag-and-drop-multiple-images-with-kineticjs

于 2013-03-01T14:49:10.070 に答える