4

ここではドラッグ可能ですが、DIV をドロップ可能領域にドラッグすると、アラート機能が起動しません。ばかげたことだと思いますが、ここにいる誰かが私が壁に頭をぶつけるのを止めてくれるかもしれません。

<head>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
            <title></title>
        </head>
        <body>

    <script>
            $(function() {
                $( ".draggable" ).draggable();
                $( ".droppable" ).droppable({
                    drop: function(event, ui) {
                        alert('dropped');
                    }
                });
            });
    </script>

        <div id=10 class="draggable">one</div>

        <div id="trash" class="droppable"></div>



        </body>
        </html>
4

3 に答える 3

9

問題は、デフォルトで、要素がどこにドロップされるかを決定するために要素の中心が使用されるという事実にあります。定義divされたサイズがないため、画面の幅です。この要素の中心がドロップ可能になるようにドロップすると、アラートが表示されます。

この背景色のフィドルは、問題を示しています。

http://jsfiddle.net/v6PME/

定義された幅を使用すると、おそらく探していた機能が表示されます。

http://jsfiddle.net/v6PME/1/

注: 私は、あなたが css を省略しており、#trashdiv にはある程度のサイズがあるため、ドロップインできると仮定しました。

于 2012-04-21T05:40:15.760 に答える
3

ジェームズ・モンターニュの答えは正しいです。特に機能しない理由 (ありがとう!)。

ただし、私の意見では、より良い解決策は、droppable を に設定してドロップ精度を上げることtoleranceですpointer。

http://jsfiddle.net/org1b75t/2/

于 2018-03-01T12:01:25.410 に答える
0

ドロップ可能な div に幅がないように見えるため、失敗しているようです。そのため、そこに何かをドロップすることは不可能です。私はあなたの例を取り、それを少し修正しました。私はそれを機能させることができました:

<html>
<head>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
            <title></title>
        </head>
        <body>

    <script>
            $(function() {
                $( ".draggable" ).draggable();
                $( ".droppable" ).droppable({
                    drop: function(event, ui) {
                        alert('dropped');
                    }
                });
            });
    </script>

        <div id=10 class="draggable">one</div>

        <div id="trash" class="droppable">DROP HERE</div>



        </body>
        </html>
于 2012-04-21T05:40:31.550 に答える