0

私は自分のWebサイトのいくつかの新しいデザインをテストしていて、自分のサイトにカートに追加機能を少しドラッグアンドドロップして実行することにしました。基本的に私が望んでいるのは、ユーザーがアイテムの画像を画面の右上隅にドラッグして（おそらく、「位置：固定」ボックスに）、このアイテムを正方形内にドロップすると、アイテムが追加されることです。ユーザーカート。

簡単なアイデアですが、これまで見たことのないアイデアです。

誰かが私がこれを実装するのを手伝ってもらえますか？どうしたらいいのかわからない。どうもありがとう。

これまでの私の仕事は次のとおりです：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="drag.css" />
        <script type="text/javascript"> 
        function setupEvents( ) {
            document.getElementById('picture').onmousedown = enableDragging;
            }
        function enableDragging( ) {
            document.onmousemove = dragElement;
            document.onmouseup = disableDragging;
            return false;
            }
            function dragElement(evt) {
                document.getElementById('picture').style.left = evt.clientX;
                document.getElementById('picture').style.top = evt.clientY;
            return false;
            }
            function disableDragging( ) {
                document.onmousemove = null;
                document.onmouseup = null;
            }

        </script>
    </head>
    <body onload="setupEvents( )">
        <div>
            <p><img src="picture.png" alt="picture" id="picture" /></p>
        </div>


    </body>
</html>
4

1 に答える 1

2

アプリケーションがJSで重い場合は、javascriptライブラリを使用することをお勧めします。これらは、JSヘビーアプリの実装の複雑さを軽減するインターフェースとAPIレイヤーを提供します。私はjqueryが好きですが、そこにはもっとたくさんのライブラリがあります。

探している機能は、ウィジェットとしてjQueryUIプロジェクトで利用できます：http：//jqueryui.com/demos/droppable/

私がフレームワークを推奨していることに不快感を覚える人もいるかもしれませんが、それはあなたのために仕事をより早く終わらせるでしょう。

編集

デモのセットアップに必要なファイルについては、次の例をご覧ください：http: //jsbin.com/ejolo6

于 2011-04-01T11:14:51.840 に答える